html - 具有平滑圆边的 CSS 三 Angular 形

Question

我正面临新的、最艰巨的 CSS 挑战。我需要开发一个带有图标和文本的三 Angular 形框。我尝试了很多不同的方法，但我没能达到我想要的结果。请看我需要的图片。任何建议或代码将不胜感激。

<div class="outer-triangle">
    <div class="inner-triangle">
        <i class="fa fa-bathtub">
        <h2>Heading</h2>
        <p>This is testing for multi line paragraph</p>
    </div>
</div>

Answer 1

我能用纯 CSS 得到的最好结果如下:

您可以进一步研究代码，看看是否可以从这里获得更多信息。

let empty ='';

.roundTriangle {
  background: #006600;
  position: absolute;
  border-radius: 50%;
  border: 20px solid #006600;
  width: 20px;
  height: 20px;
}

.roundTriangle::after {
  position: absolute;
  content: '';
  width: 0px;
  height: 0px;
  bottom: -62px;
  left: -13.9px;
  border: 24px solid transparent;
  border-top: 30px solid #006600;
}

<div class="roundTriangle"></div>