【问题标题】：CSS to create an acute isosceles triangle with curved edgesCSS 创建一个带有弯曲边缘的锐角等腰三角形
【发布时间】：2015-02-13 11:50:39
【问题描述】：

我正在尝试使用具有弯曲边缘的纯 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>

【问题讨论】：

并不是说它是不可能的，但是对于像这样的复杂形状，CSS 不是最好的选择。 SVG 或图像会更合适（但尝试并没有错 :)）
@Harry 检查我的答案，这样的形状并不太难创建。你只需要知道如何:)
@Harry：我同意，svg 似乎很适合这个。由于某种原因，“边界半径”似乎不太正确：L
@Ruddy：我不是说不可能的伴侣。通过努力，更复杂的形状是可能的，但代价是什么？创建如此复杂的形状、放置它们以使它们在所有浏览器、所有缩放级别等上看起来都一样，需要付出相当多的努力，而其他方法可以相对更快地实现相同的效果。这就是我想说的。
@Harry 哦，我不是说你说不可能的。我只是说可以不费吹灰之力地制作形状，只需对一个相当简单的 CSS 形状进行大量调整。 SVG 会更适合这种类型的东西，是的，我同意这一点。

标签： css geometry css-shapes

【解决方案1】：

svg 解决方案怎么样？

<svg width="200" height="200" viewBox="-2 0 252 212">
  <path fill="rosybrown" d="M125 0 c-81.6 60 -113.3 130 -125 200 c83.3 40 166.6 40 250 0 c-11.7 -70 -43.4 -140 -125 -200" fill="none" stroke-width="2" stroke="black" />
</svg>

【讨论】：

以为你会在某个时候突然出现 :) 我知道 svg 将是“答案”，而不是如何去做：P

【解决方案2】：

只是另一种可能性，不使用任何旋转。只是裁剪不同的圆圈。

.triangle {
    position: relative;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background-color: lightblue;
    overflow: hidden;
}

.triangle div {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 31%;
    left: 16%;
    background-color: lightyellow;
    border-radius: 50%;
    overflow: hidden;
}

.triangle div:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    right: 30%;
    background-color: red;
    border-radius: 50%;
}

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

浅色只是为了让三角形的构造更明显

【讨论】：

不错的解决方案！顺便说一句，每个顶点都是相反弧的中心。

【解决方案3】：

解决方案 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);
}

&lt;div&gt;&lt;/div&gt;

我猜测 svg 可能是更好的选择（注意：我不知道 svg，这似乎是 @chipChocolate.pys 的专业领域）。所以使用“只是伪效果”，我认为你正在寻找使用两个元素（但我希望看到被证明是错误的！）。 “单一元素”完全看起来不太正确，但可能对你来说是完美的，也可能不是完美的

【讨论】：

看看我的答案，同样的想法只是更接近完成的样子。

【解决方案4】：

纯 CSS

使用不同的变换。

我使用transform: rotate(30deg); 和transform-origin: 0% 100%; 创建了三个扇区，然后我转换了它们的父容器（左侧为scaleX: -1;）。完成。

这可以只使用一对#cont 和#circ 元素来完成，但我使用不同的标签只是为了更好地展示。

#cont {
    height: 300px;
    width: 300px;
    overflow: hidden;
    position:relative;
}
#circ {
    height: 300px;
    width: 300px;
    background: black;
    border-radius: 0 300px 0 0;
    transform: rotate(30deg);
    transform-origin: 0% 100%;
}
#cont:nth-of-type(2){
    top: -300px;
    transform: scaleX(-1);
}
#cont:nth-of-type(3){
    top: -600px;
    transform: rotate(30deg);
    transform-origin: 0% 100%;
}
#cont:nth-of-type(3) > #circ {
    border-radius: 0 0 300px 0;
    transform-origin: 0% 0%;
}

<div id="cont">
    <div id="circ">
    </div>
</div>
<div id="cont">
    <div id="circ">
    </div>
</div>
<div id="cont">
    <div id="circ">
    </div>
</div>

注意：对于真正的网站，几乎总是使用 SVG。但是用 CSS 创建形状是一门不能被扼杀的艺术。

【讨论】：

【解决方案5】：

这是我的尝试。我认为这是最好的方法，使用 1 个元素和 :before :after。

使用div 作为基本元素（底部），我们可以将其上方的另外两个对齐，保持大小和形状相同。

div {
  width: 120px;
  height: 60px;
  background: red;
  border-radius: 50%;
  position: relative;
  margin: 100px;
}
div:before, div:after {
  content: "";
  display: block;
  background: red;
  border-radius: 50%;
  position: absolute;
  width: 60px;
  height: 120px;
  top: -70px;
}
div:before {
  transform: rotate(30deg);
  left: 8px;
}
div:after {
  transform: rotate(-30deg);
  right: 8px;
}

&lt;div&gt;&lt;/div&gt;

编辑：

又一次尝试，从第一次开始略有调整。

div {
  width: 100px;
  height: 50px;
  background: red;
  border-radius: 50%;
  position: absolute;
  top: 10px;
  left: 70px;
  margin: 100px;
}
div:before,
div:after {
  content: "";
  display: block;
  background: red;
  border-radius: 50%;
  position: absolute;
  width: 36px;
  height: 106px;
  top: -65px;
}
div:before {
  transform: rotate(28deg);
  left: 8px;
  border-right: 10px solid red;
}
div:after {
  transform: rotate(-28deg);
  right: 8px;
  border-left: 9px solid red;
}

&lt;div&gt;&lt;/div&gt;

【讨论】：

感谢您的努力，尽管它与 OP 需要的并不完全相同。

【解决方案6】：

我喜欢挑战:)

我最近开始喜欢更复杂的边界半径变化。我敢肯定，通过一些更繁琐和体面的数学计算，您可以摆脱不同面相交的粗糙边缘。可惜现在没时间了。

.triangle {
  position: absolute;
  top: 100px;
  left: 100px;
  border-left: 25px solid transparent;
  border-bottom: 40px solid blue;
  border-right: 25px solid transparent;
  width: 0;
  border-bottom-right-radius: 80px 70px;
  border-bottom-left-radius: 0 0;
  transform: rotate(160deg);
}
.triangle:after {
  content: '';
  position: absolute;
  border-left: 25px solid transparent;
  border-bottom: 40px solid CornflowerBlue;
  border-right: 25px solid transparent;
  width: 0;
  left: -54px;
  top: -12px;
  border-bottom-right-radius: 80px 70px;
  border-bottom-left-radius: 0 0;
  transform: rotate(120deg);
}
.triangle:before {
  content: '';
  position: absolute;
  border-left: 25px solid transparent;
  border-bottom: 40px solid darkblue;
  border-right: 25px solid transparent;
  width: 0;
  top: -30px;
  left: -29px;
  border-bottom-right-radius: 80px 70px;
  border-bottom-left-radius: 0 0;
  transform: rotate(240deg);
}

&lt;div class="triangle"&gt;&lt;/div&gt;

【讨论】：