Треугольник вверх ногами с закругленным углом

Question

Мне нужно воссоздать эффект, подобный этому, в заголовке моего сайта. Я хотел бы сделать это с помощью CSS, кто может помочь мне, потому что я застрял с этим треугольником ...

Вот мой тест:

#main-nav {height:200px;width:1200px;background-color:#000} 
 
#triangle { 
 
    width: 0; 
 
    height: 0px; 
 
    border-style: solid; 
 
    border-width: 300px 300px 0px 0px; 
 
    border-color: #007bff transparent transparent transparent; 
 
    border-radius: 70px 2px 2px 2px; 
 
    margin: auto; 
 
    top: -400px; 
 
    position: relative; 
 
    /* background-color: #ccc; */ 
 
    -moz-border-radius: 20px; 
 
    transform: rotate(-135deg); 
 
    /* border-top: 80px solid blue; */ 
 
    /* border-bottom: 80px solid blue; */ 
 
    /* border-right:80px solid blue; */ 
 
}

<div id="main-nav"> 
 
</div> 
 
<div id="triangle"> 
 
</div>

Answer 1

Вы можете сделать это:

CSS

#main-nav { 
    position: relative; 
    height: 200px; 
    width: 1200px; 
    overflow: hidden; 
    background-color: #D1C5B9; 
    z-index: 1; 
} 

#triangle { 
    position: absolute; 
    display: block; 
    width: 100%; 
    background: #3C3C3A; 
    height: 40px; 
    z-index: 4; 
} 

#triangle:after { 
    position: absolute; 
    content: ""; 
    display: block; 
    width: 100px; 
    height: 50px; 
    transform: rotate(15deg); 
    background: #3C3C3A; 
    z-index: 4; 
    border-radius: 14px; 
    left: 50%; 
    margin-left: -65px; 
    top: 0px; 
    border: 1px solid #3C3C3A; 
} 

#triangle:before { 
    position: absolute; 
    content: ""; 
    display: block; 
    width: 100px; 
    height: 50px; 
    transform: rotate(-15deg); 
    background: #3C3C3A; 
    z-index: 3; 
    border-radius: 14px; 
    left: 50%; 
    margin-right: 0; 
    top: 0px; 
    border: 1px solid #3C3C3A; 
} 

HTML

<div id="main-nav"> 
    <div id="triangle"> 
    </div> 
</div> 

ПРИМЕЧАНИЕ: Adjust как ваши потребности

DEMO HERE