Just copy the code and paste to create a triangle in html and css

By  at August 09, 2019    
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="description" content="Free Web tutorials">
  <meta name="keywords" content="HTML,CSS,XML,JavaScript">
  <meta name="Mustak" content="">

  <title>triangle</title>

<style type="text/css">
  .triangle{
 
    width: 0px;
    height: 0px;
    border-bottom: 200px solid green;
    margin: 0px;
    border-left: 150px solid transparent;
    border-right: 150px solid transparent;
    float: left;
   }
.boy{
width: 150px;
height: 150px;
margin: 100px auto;
background-color: blue;
position: relative;

}

.boy:before{
width: 75px;
height: 75px;
background-color: red;
content: '';
display: block;
clear: both;
position: absolute;
top: 150px;
left: 150px;

}
.boy:after{
width: 75px;
height: 75px;
background-color: green;
content: '';
display: block;
clear: both;
position: absolute;
top: -75px;
left: -75px;
}

.boy:hover:after{
width: 75px;
height: 75px;
background-color: green;
content: '';
display: block;
clear: both;
position: absolute;
top: 150px;
left: 150px;
transition: 1s;
}
.boy:hover:before{
width: 75px;
height: 75px;
background-color: red;
content: '';
display: block;
clear: both;
position: absolute;
top: -75px;
left: -75px;
transition: 1s;

}








</style>





</head>
<body>

<div class="triangle"></div>

<div class="boy"></div>
<div class="boy"></div>

</body>
</html>

triangle