How to scale a triangle with rectangle content in css? - html

Question

I have created a triangle with a border and a coloured background. However it is attached to a rectangle with some content and i can't figure out how to scale the triangle with it.
I have used a pseudo element and put a triangle on top of another triangle to create the border, so not sure if this way is possible to scale with.
My problem is the triangle
HTML:
<div class="skipcontent">
<i class="bi bi-skip-end-circle" style="font-size:36px;"></i>
<p class="alertcontent">content can span onto 2 lines. content can span onto 2 lines. content can span onto 2 lines. content can span onto 2 lines. </p>
</div>
</div>
Here is my CSS:
.container {
width: 700px;
height: 100%;
background: #D9F1FF;
border: 1px solid #7197C9;
position: relative;
color: #000000;
font-size:15px;
border-radius: 5px;
font-family: Arial,Helvetica,sans-serif;
}
/* this CS forms the triangles */
.container:after,
.container:before {
content: '';
display: block;
position: absolute;
left: 100%;
width: 0;
height: 0;
border-style: solid;
}
/* this border color controls the color of the triangle (what looks like the fill of the triangle) */
.container:after {
top: 0px;
border-color: transparent transparent transparent #D9F1FF;
border-width: 26px;
margin-left:-2px;
}
/* this border color controlls the outside, thin border */
.container:before {
top: 0px;
border-color: transparent transparent transparent #7197C9;
border-width: 26px;
margin-left:-1px;
}
.skipcontent {
padding:0 0 0 20px;
display:flex;
align-items:center;
}

Answer 1

You can do it easily by using "Clippy - clip-path". But you can't add the border and border-radius on everywhere.
Reference site link - https://bennettfeely.com/clippy/
Demo Screenshot - https://prnt.sc/-J3_o3rHqlFU
.skipcontent {
color: #ffffff;
background: red;
border-radius: 5px;
padding: 20px 40px;
clip-path: polygon(50% 0%, 97% 0, 100% 28%, 97% 50%, 97% 100%, 0 100%, 0% 35%, 0 0);
}