如何创建圆形雪佛龙形状[重复]

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

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

要改变曲线的深度，只需改变: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>

Answer 2

圆形人字形，嘿？像这样？

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

.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 标签中的渐变和/或图像。