CSS Triangle具有平滑的圆形adges

Question

我正面临着新的和最艰难的css挑战。我需要开发一个带图标和文字的三角形框。我尝试了很多不同的方法，但我没有达到我想要的结果。请看图像我需要什么。任何建议或代码将不胜感激。

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