I have created a div containing a triangle shape as shown below:
#inner-div {
width:200px;
height:200px;
background-color:black;
position:relative;
border:2px solid red;
}
#triangle {
border-right:15px solid transparent;
border-left:15px solid transparent;
border-bottom:15px solid white;
position:absolute;
bottom:0px;
left:50%;
margin-left:-13.5px;
}<div>
<div id="inner-div">
<span id="triangle"></span>
</div>
</div>My goal is for the red border to not follow a straight path, but instead curve along with the triangular shape. I would like to achieve this using CSS only, without the need for images.
NOTE: I am aware of similar questions on SO, however, the solutions provided are often limited to WebKit browsers and do not offer cross-browser compatibility. I am looking for a solution that works across different browsers.