Making triangles with CSS

HTML code:

<div class= "Div" ></div>

CSS code:

. div{
border-top:40px solid #ff0077;
border-left:40px solid #004444;
border-bottom:40px solid #999999;
border-right:40px solid #333333;
height:0px;
width:0px;
}

Effect:

Now one of them breaks out.

HTML code:

<div class= "Triggle-top" ></div>
<div class= "Triggle-left" ></div>
<div class= "Triggle-bottom" ></div>
<div class= "Triggle-right" ></div>

CSS code:

. triggle-top,.triggle-left,.triggle-bottom,.triggle-right{
border:100px solid Transparent;
height:0;
width:0;
}
. triggle-top{
Border-top-color: #ff0077;
}
. triggle-left{
Border-left-color: #004444;
}
. triggle-bottom{
Border-bottom-color: #999999;
}
. triggle-right{
Border-right-color: #333333;
}

:

In short: Making a small triangle is made using the border property.

Extra:

And what I'm trying to say is a general label such as:

This delete x can be implemented by: after{content: ' X '}

Making triangles with CSS