如何创建圆形雪佛龙形状

Question

我试图使用带圆头的CSS（顶边而不是三角形）创建一个V形状，但是无法实现这一点。有人可以帮忙吗？ 演示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);
}

Answer 1

圆形的雪佛龙，嘿？像这样的东西？

我使用伪元素和径向渐变实现了这一目标。

＆＃13;

＆＃13;

.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%);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

另一种方法是使用高框阴影值，使用伪元素的框阴影颜色作为主要元素的颜色：

＆＃13;

＆＃13;

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;
  }

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;

两者都支持html和body标签中的渐变和/或图像。

Answer 2

这不是最干净的方式，但它有效并且使用伪元素。

要更改曲线的深度，只需更改:after标记内的高度。

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;