三角形有两个圆形边

我试着瞎搞与:before和:after,但我想我搞砸了,因为我甚至不能,尽管给它提供一套宽度/高度和块显示它展现出来......如此反复,不知道哪里去了.

使用CSS:

使用CSS可以实现的最佳效果如下所示.形状结构如下:

除了border-top-right-radius之外,其边界半径为100%的伪元素.这会产生叶状的形状.然后将其旋转-45度,使尖端朝向顶部.

然后,该伪元件被定位成使得只有它的一半是(通过设置可见overflow作为hidden父).

然后将父容器的Y轴旋转一个高角度以压缩形状.这使它看起来更像一个箭头.

形状是响应的,但你可以看到它的创建非常棘手,这就是为什么CSS不适合这项工作的原因.SVG是正确的工具,下面提供了演示.

div {
  position: relative;
  height: 200px;
  width: 200px;
  border-bottom: 2px solid tomato;
  overflow: hidden; /* hide the parts that are not required */
  transform: rotateY(65deg); /* to compress the shape in Y axis */
}
div:before {
  position: absolute;
  content: '';
  left: 0px;
  top: 50%; /* positioning to make only part of it visible */
  height: calc(100% - 6px); /* to offset for the border width */
  width: calc(100% - 6px); /* to offset for the border width */
  border-radius: 100% 0% 100% 100%;
  transform: rotate(-45deg);
  border: 3px solid tomato; /* made thicker because the transform will make it look thinner than normal */
}

/* just for demo */

div {transition: all 1s ease;}
div:hover {
  height: 250px;
  width: 250px;
}