如何創建一個圓角雪佛龍形狀

我想創建一個使用具有圓頭（頂邊，而不是三角形）的CSS的雪佛龍形狀，但無法實現此目的。誰能幫忙？演示here。如何創建一個圓角雪佛龍形狀

CSS：

#shape{ 
    width: 100px; 
    height: 100px; 
    background-color: lightblue; 
    -webkit-clip-path: polygon(100% 100%, 0 100%, 0 0, 52% 16%, 100% 0); 
    clip-path: polygon(100% 100%, 0 100%, 0 0, 52% 16%, 100% 0); 
}

enter image description here

來源

2015-06-08 undroid

你的意思是在頂部或只是冰山一角一個完整的半圓？ – Harry

我不會說完整的半圓，而是一個圓頂。輕微的圓頭。 – undroid

喜歡這個https://jsfiddle.net/897ty4bx/1/？ – lmgonzalves

一個四捨五入字形，哎？像這樣？

我已經實現了這個使用僞元素和徑向漸變。

.rounded { 
 
    height: 200px; 
 
    width: 200px; 
 
    position: relative; 
 
    margin: 100px; 
 
    background: tomato; 
 
} 
 
.rounded:before { 
 
    content: ""; 
 
    position: absolute; 
 
    top: -20%; 
 
    height: 20%; 
 
    width: 100%; 
 
    left: 0; 
 
    background: radial-gradient(ellipse at top center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 70%, tomato 71%, tomato 100%); 
 
}

<div class="rounded"></div>

另一種方法是使用高盒陰影值代替，使用僞元件的盒子陰影顏色爲主要元素的顏色，以及：

div{ 
 
    height:200px; 
 
    width:200px; 
 
    position:relative; 
 
    overflow:hidden; 
 
    
 
    } 
 
div:before{ 
 
    content:""; 
 
    position:absolute; 
 
    top:-25%;left:0; 
 
    height:50%; 
 
    width:100%; 
 
    border-radius:50%; 
 
    box-shadow:0 0 0 999px tomato; 
 
    }

<div></div>

兩者都支持html和body標籤中的漸變和/或圖像。

來源

2015-06-08 14:53:11 jbutler483

這幫了我很多。謝謝！ – undroid

沒問題。如果你想要一個堅實的彩色雪佛龍，我會去我的答案的後半部分。 – jbutler483

這不是最乾淨的方式，但它的有效性和使用僞元素的作品。

要更改曲線的深度，只需更改:after標記內的高度即可。

.chevron { 
 
    position: relative; 
 
    text-align: center; 
 
    padding: 12px; 
 
    margin-bottom: 6px; 
 
    height: 60px; 
 
    width: 200px; 
 
    background: red; 
 
} 
 
.chevron:after { 
 
    content: ''; 
 
    width: 200px; 
 
    padding: 12px; 
 
    height: 1px; 
 
    position: absolute; 
 
    top: -12px; 
 
    left: 0; 
 
    border-radius: 50%; 
 
    border-color: white; 
 
    background: white; 
 
}

<div class="chevron"></div>

來源

2015-06-08 14:53:37 Stewartside

如何創建一個圓角雪佛龍形狀

回答

相關問題