如何创建一个圆角箭头形状

Question

我正在尝试使用CSS创建一个棱形，其顶部是圆角头(而不是三角形)，但是无法实现。有人可以帮忙吗？ 示例在此处。

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

- Alex

---

你是指顶部是一个完整的半圆形还是只有尖端？ - Harry

我不会说是一个完整的半圆，而是一个圆形的顶部。略微圆润的头部。 - Alex

一张图片会非常有帮助，这样我们就能确切知道你想要什么。 - Hidden Hobbes

已添加图像。 - Alex

那个图像不是一个尖角符号，对吗？请提供它应该看起来像什么的图像。 - tvgemert

Answer 1

一个圆角箭头，是吗？类似这样的东西？

我使用伪元素和径向渐变来实现这个效果。

.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标签中使用渐变和/或图片。

- jbutler483

---

那帮了我很多。谢谢！ - Alex

如果你想选择实色人字形图案，我建议你选择我的回答后半部分。 - jbutler483

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>

- Stewartside