倒三角倒角與圓角

我需要在我的網站的標題中重新創建一個像這樣的效果。我想通過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>

來源

2015-12-11 Sam Provides

這將幫助你 - http://stackoverflow.com/questions/27462276 /邊界上帶有一個透明或 - 相同-COL or-centered-arrow-on-a-div or http://stackoverflow.com/questions/23758922/transparent-arrow-triangle/23759602#23759602 – Harry

您可以做到這一點：

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>

注：調整根據您的需求

DEMO HERE

來源

2015-12-11 17:32:36

倒三角倒角與圓角

回答

相關問題