如何创建圆形人字形

Question

我正在尝试使用 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);
}

Answer 1

圆形 V 形，嘿？是这样的吗？

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

.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 标签中的图像都支持渐变 and/or。

Answer 2

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

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

如何创建圆形人字形

How to create a rounded Chevron shape

html

css

css-shapes