如何创建一个圆角雪佛龙形状

我想创建一个使用具有圆头（顶边，而不是三角形）的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

如何创建一个圆角雪佛龙形状

回答

相关问题