How to create arrows or triangles in css and html

How-to-create-arrows-or-triangles-in-css-and-html

How to create arrows or triangles in css and html

In this tutorial, you learn How to create arrows or triangles in css and html in simple step 1 .

STEP:1 :- open an editor, paste the following code and save it as .html or the extension you want to save

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>


<div style="width: 0;
height: 0;
border-style: solid;
border-width: 0 100px 200px 100px;
border-color: transparent transparent #007bff transparent;float: left;">
	
</div>



<div style="width: 200px;
height: 200px;
background: #007bff;
float: left;
margin-left: 5%;

">

</div>




<div style="width: 0;
height: 0;
float:left;
border-style: solid;
border-width: 0 200px 200px 0px;
border-color: transparent transparent #007bff transparent;float: left;margin-left: 5%;">
</div>



<div style="width: 0;
height: 0;
float:left;
border-style: solid;
border-width: 0 0px 200px 200px;
border-color: transparent transparent #007bff transparent;float: left;margin-left: 5%;">
</div>



<div style="width:100%;float: left;margin-top:5%;">
<div style="width: 0;
height: 0;
border-style: solid;
border-width: 0 100px 200px 100px;
border-color: transparent transparent #007bff transparent;float: left;margin-left: 5%;transform: rotate(180deg);">
</div>


<div style="width: 0;
height: 0;
border-style: solid;
border-width: 0 100px 200px 100px;
border-color: transparent transparent #007bff transparent;float: left;margin-left: 5%;transform: rotate(90deg);">
</div>


<div style="width: 0;
height: 0;
border-style: solid;
border-width: 0 100px 200px 100px;
border-color: transparent transparent #007bff transparent;float: left;margin-left: 5%;transform: rotate(270deg);">
	
</div>


</div>
</body>
</html>

STAY CONNECTED FOR MORE :)

ADD COMMENT

Your email address will not be published. Required fields are marked *








Be the first to comment. :)

The primary motive of our company is to provide beyond satisfactory results .

Request a free consultation quote

WWW.BHAGAUTI.COM © COPYRIGHT 2018 | TERMS AND CONDITIONS | Privacy & Policy