Triangle shape with rounded corners and border

Question

I am trying to create a triangle shape with rounded corners and a border around the shape with the text over the shape as shown below using HTML and CSS:

How can we make a triangle with rounded corners and add a white border around the shape?

Here's the code I tried

.triangle{
  position: relative;
border-bottom: 70px solid transparent;
    border-left: 140px solid #1e5b67;
    border-top: 70px solid transparent;
  display: inline-block;
  transition: all .25s ease;
}


.text{
  position: absolute;
  color: #fff;
    top: 3px;
    display: block;
    width: 131px;
    height: 180px;
    transform: translate(-50%,-50%);
    text-align: center;
    box-sizing: border-box;
    padding: 67px 0;
    transition: all .25s ease;
    margin-left: -95px;

}

<a class="triangle" href="#">
  <div class="text">Text<br>text</div>
</a>

Can anyone please help me to achieve this?

This question https://stackoverflow.com/questions/14446677/how-to-make-3-corner-rounded-triangle-in-css/65485455#65485455 elicited several useful answers on rounding corners. — A Haworth, Jun 01 '22 at 09:43

Triangle shape with rounded corners and border

0 Answers0