有两条圆边的三角形

Question

我正在尝试创建一个三角形，但是有圆边。我的意思是侧面，而不是角落。这样做的原因是三角形是为了模仿动物的耳朵。然而，我无法弄清楚如何让两侧不那么直。如果可能的话，我想要一个仅 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，但我想我搞砸了，因为尽管给了它一组，我什至无法让它显示出来 width/height和块显示...所以，再次不确定去哪里。

Answer 1

这是我的尝试！

.e1 {
  width: 124px;
  height: 160px;
  background: #f7882e;
  position: relative;
  border-radius: 100% 100% 0 0 / 200% 200% 0 0;
  margin: 60px;
  -webkit-transform:rotate(-45deg);
 }
 .e1:before {
   content:"";
   display: block;
   position: relative;
   margin: 0 auto;
   top: -39px;
   width: 0;
   height: 0;
   border-left: 46px solid transparent;
   border-right: 46px solid transparent;
   border-bottom: 91px solid #f7882e;
 }

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

Answer 2

使用CSS:

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

A pseudo-element 除了 border-top-right-radius 之外，其 border-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;
}

<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>

Answer 3

这是绘制此形状的另一种方法。

创建具有特定 width、height 和 border-bottom 值的 div。
添加 overflow: hidden 以便隐藏多余的部分。
使用 :before 和 :after 伪元素绘制大椭圆并调整值，使它们在公共点相交。

输出图像：

* {box-sizing: border-box;}

div {
  border-bottom: 2px solid orange;
  position: relative;
  overflow: hidden;
  height: 400px;
  width: 250px;
  margin: 20px;
}

div:before,
div:after {
  border: 2px solid orange;
  position: absolute;
  border-radius: 100%;
  bottom: -150%;
  height: 300%;
  content: '';
  width: 396%;
  left: 0;
}

div:after {
  left: auto;
  right: 0;
}

<div>

</div>

有两条圆边的三角形

Triangle with two rounded sides

html

css

css-shapes