CSS创建带有弯曲边缘的等腰三角形

Question

我试图使用具有弯曲边缘的纯CSS创建一个三角形。

如果没有完全超越，这有可能吗？

我在下面添加了一个示例，介绍了我要实现的目标（曲线-而非直线）。

到目前为止，我一直在使用以下代码，但是它并不是我想要的。

    #inner {
      transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      -webkit-transform: rotate(45deg);
      -o-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
      background-color: silver;
      width: 100px;
      height: 100px;
      top: 20px;
      left: -50px;
      position: relative;
      -moz-border-radius: 20px;
      border-radius: 20px;
    }
    #outer {
      position: absolute;
      width: 70px;
      height: 140px;
      top: 20px;
      left: 50px;
      overflow: hidden;
      border: 1px solid red;
    }

<div id="outer">
  <div id="inner">&nbsp;</div>
</div>

Answer 1

解决方案 1：使用两个元素

第一个例子并不完美，但确实回答了你的问题：

.wrapper{
  /*overflow:hidden;*/
  width:0;
  border-top:100px solid transparent;
  border-left:100px solid red;
  position:relative;
  margin:50px;
  transform:rotate(135deg);
  }

.triangle{
  width:20px;
  height:100px;
  background:red;
  border-radius:50%;
  transform:translate(-110px);
  position:absolute;
  top:-100px;
  left:0;
  }
.triangle:after{
  content:"";
  width:100px;
  height:20px;
  background:red;
  border-radius:50%;
  transform:translate(0px);
  position:absolute;
  top:90px;
  left:10px;
  }
.triangle:before{
  content:"";
  width:140px;
  height:20px;
  background:red;
  border-radius:50%;
  transform:rotate(225deg);
  position:absolute;
  top:40px;
  left:-10px;
  }

<div class="wrapper">
   <div class="triangle"></div>
</div>

请注意，这不是一个等边三角形，更像是一个等腰三角形，毫无疑问可以编辑成更好的三角形！

解决方案 2：使用单个元素

我试图使用单个div元素创建这个形状，但我只能生成三角形的两条边。因此，据此，我推断使用 css 需要两个元素：

所示三角形的两条边：

div {
  border-left: 100px solid transparent;
  border-bottom: 126px solid blue;
  border-right: 100px solid transparent;
  width: 0;
  border-radius:50%;
  position: relative;
}
div:after,
div:before {
  content: "";
  position: absolute;
  height: 130px;
  width: 20px;
  border-radius: 50%;
  top: -15px;
    background: blue;
}
div:after {  
  left: -50px;
  transform: rotate(40deg);
}
div:before {
  left: 30px;
  transform: rotate(-40deg);
}

<div></div>

我猜测 svg 可能是一个更好的选择（注意：我不知道 svg，这似乎是 @chipChocolate.pys 的专业领域）。因此，使用“仅伪效果”，我认为您希望使用两个元素（但我希望看到被证明是错误的！）。“单一元素”似乎不太正确，但可能适合也可能不适合您