html - 有两条圆边的三 Angular 形

Question

我正在尝试创建一个三 Angular 形，但边是圆的。我的意思是侧面，而不是 Angular 落。这样做的原因是三 Angular 形是为了模仿动物的耳朵。然而，我无法弄清楚如何让两侧不那么直。如果可能的话，我想要一个纯 CSS 解决方案。

如果您需要图片，这正是我想要的。

我已经设法得到 this far ，但我不确定下一步该去哪里。

.e1 {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 75px 200px 75px;
  border-color: transparent transparent #f7882e transparent;
  -webkit-transform: rotate(-45deg);
}

<div class="e1"></div>

我试着搞乱 :before 和 :after，但我想我搞砸了，因为尽管给了它我什至无法让它显示出来设置宽度/高度和 block 显示...再次，不确定去哪里。

Answer 1

使用 CSS:

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

• 一个伪元素，其 border-radius 除了 border-top-right-radius 之外的所有边都是 100%。这会产生叶子状的形状。然后将其旋转 -45 度，使尖端朝向顶部。
• 然后定位这个伪元素，使其只有一半可见(通过在父级上将 overflow 设置为 hidden)。
• 然后将父容器的 Y 轴旋转一个高 Angular 以压缩形状。这使它看起来更像一个箭头。

形状是响应式的，但如您所见，它的创建非常棘手，这就是为什么 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;
}

<div></div>

---

使用 SVG: ^推荐

借助 SVG，我们可以使用单个 path 元素和几个 Quadratic Curve-to (Q) 命令创建此形状。它非常简单，可扩展(响应)，允许我们更好地控制曲率等。

使用的SVG命令及说明:

• M - 将虚构的笔移动到坐标指定的点。
• Q - 从笔的当前位置到 Q 命令后的第二组坐标指示的点绘制二次曲线。第一组坐标代表控制点。这个控制点决定了曲线的斜率。
• z - 通过从当前笔位置到起点绘制一条直线来闭合形状。

SVG 形状也可以像普通 CSS 元素一样旋转。

svg {
  height: 200px;
  width: 200px;
}
path {
  fill: none;
  stroke: tomato;
  stroke-width: 1;
}

/* just for demo */

svg {
  transition: all 1s ease;
}
svg:hover {
  transform: rotate(-15deg);
}

<svg viewBox="0 0 105 105" preserveAspectRatio="none">
  <path d="M15,102 Q25,50 50,0 Q75,50 85,102z" />
</svg>

以上只是一个基本的实现。您可以使用二次曲线的控制点来获得不同的斜率。以下是一些可能的示例:

<path d="M15,102 Q25,35 50,0 Q75,35 85,102z" />
<path d="M15,102 Q20,35 50,0 Q80,35 85,102z" />

---

对此类形状使用 SVG 的另一个优点是，您可以轻松地向形状添加渐变或图像作为填充或背景。下面是一个演示:

svg {
  height: 200px;
  width: 200px;
}
path {
  fill: none;
  stroke: tomato;
  stroke-width: 1;
}
path#image {
  fill: url(#bg-image);
}
path#gradient {
  fill: url(#bg-grad);
}

<svg viewBox="0 0 105 105" preserveAspectRatio="none">
  <defs>
    <pattern id="bg-image" width="1" height="1" patternUnits="objectBoundingBox">
      <image xlink:href="https://placeimg.com/200/200/nature" width="105" height="105" />
    </pattern>
  </defs>
  <path d="M15,102 Q20,35 50,0 Q80,35 85,102z" id="image" />
</svg>

<svg viewBox="0 0 105 105" preserveAspectRatio="none">
  <defs>
    <radialGradient id="bg-grad" width="1" height="1" patternUnits="objectBoundingBox">
      <stop offset="0%" stop-color="#3F9CBA" />
      <stop offset="100%" stop-color="#153346" />
    </radialGradient>
  </defs>
  <path d="M15,102 Q20,35 50,0 Q80,35 85,102z" id="gradient" />
</svg>