CSS треугольник с гладкими закругленными краями

Question

Я столкнулся с новым и самым сложным испытанием для меня. Мне нужно разработать треугольную коробку со значком и текстом. Я пробовал много разных подходов, но мне не удалось достичь результата, которого я хотел. пожалуйста, смотрите изображение, что мне нужно. любые предложения или код будут оценены.

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