用于创建具有弯曲边缘的锐角等腰三角形的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

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>

Answer 2

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

第一个例子并不完美，但可以回答你的问题：

＆＃13;

＆＃13;

.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;
  }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

---

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

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

三角形的两面显示：

＆＃13;

＆＃13;

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);
}

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;

---

我猜svg可能是更好的选择（注意：我不知道svg，这似乎是@ chipChocolate.pys的专业领域）。因此，使用＆＃39;只是伪效果＆＃39;，我认为您正在寻找使用两个元素（但我希望看到被证明是错误的！）。单个元素＆＃39;没有相当似乎是正确的，但可能适合或不适合你

Answer 3

纯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创建形状是一种绝不能被杀死的艺术。

Answer 4

只是另一个可能性，不使用任何旋转。只是剪掉不同的圈子。

＆＃13;

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

Answer 5

这是我对此的尝试。我认为这是使用1个元素和:before :after的最佳方式。

使用div作为基本元素（底部），我们可以排列其上面的其他2，保持大小和形状相等。

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

<div></div>

---

修改：

另一种尝试，从第一次轻微调整。

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

<div></div>

Answer 6

我喜欢这个挑战：）

我最近开始喜欢更复杂的边界半径变化。我确信通过一些更加小巧和不错的数学计算，你可以摆脱不同方面相遇的粗糙边缘。现在没时间了。

＆＃13;

＆＃13;

.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);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;