<html>
<header></header>
<style>
body{
display: flex;
align-items: flex-start;
justify-content: center;
}
#a{
width: 50px;
border-style: solid;
border-width: 50px;
border-color: transparent transparent red transparent;
position: relative;
}
#a:after{
content: "";
border-style: solid;
border-width: 100px 75px 75px 75px;
border-color: red transparent transparent transparent;
position: absolute;
top: 50;
left: -50;
}
#b{
margin-top: 120px;
width: 0;
height: 0;
border-style: solid;
border-width: 50px;
border-color: red blue green yellow;
}
#c{
margin-top: 10px;
width: 50px;
height: 0;
border-style: solid;
border-width: 50px;
border-color: red blue green yellow;
}
#d{
margin-top: 10px;
width: 0;
height: 50;
border-style: solid;
border-width: 50px;
border-color: red blue green yellow;
}
</style>
<body>
<div>
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
<div id="d"></div>
</div>
</body>
</html>
