Hii,

In this blog. I am sharing CSS code to create different patterns like a square, triangle arrow etc.

Shapes created using CSS technique instead of an image can help to make your web page lighter as compared to a web page with lots of images.

To create shapes using CSS mostly we use CSS properties such as border-radius, border, transform, pseudo elements, box-shadow,gradient etc.

Go through the example given below to learn how to create shapes  using CSS properties

Html:

<div class="main">
<p style="font-weight:bold;font-size:20px;">Square using css</p>
<div id="square"></div>
</div>
<div class="main">
<p style="font-weight:bold;font-size:20px;">Right side pointed Triangle using css</p>
<div class="arrow-right"></div>
</div>
<div class="main">
<p style="font-weight:bold;font-size:20px;">Hemisphere using css</p>
<div class="tophemisphere"></div>
</div>
<div class="main">
<p style="font-weight:bold;font-size:20px;">Button using css</p>
<div style=" margin: 0 auto 20px;"><a href="" class="btn">Button</a></div>
</div>
<div class="main">
<p style="font-weight:bold;font-size:20px;">Right Arrow using css</p>
<div><a href="#" class="btn2" style="text-decoration:none;display: inline-block;"><span class="GoDirection">Go in this direction<strong>Mohannagar:20km</strong></span>
<span class="arrow-right"></span>
</a>
</div>
</div>
<div class="main">
<p style="font-weight:bold;font-size:20px;">Triangle pointed toward upwards using css</p>
<div id="triangle-up"></div>
</div>
<div class="main">
<p style="font-weight:bold;font-size:20px;">Triangle pointed toward downwards using css</p>
<div id="triangle-down"></div>
</div>
<div class="main">
<p style="font-weight:bold;font-size:20px;">Star with Five points using css </p>
<div id="star-five"></div>
</div>

CSS:

div.main{margin:0px auto 30px;border-bottom:5px solid black;width:100%;max-width:70%;text-align:center;}

#square {width: 100px;height: 100px;background:#3B62BB;margin:20px auto;}
.arrow-right {width: 0; height: 0; border-top: 60px solid transparent;border-bottom: 60px solid transparent;border-left: 60px solid #BB2525;}
div.tophemisphere{margin: 0 auto 10px;height:45px;width:90px;border-radius: 90px 90px 0 0;-moz-border-radius: 90px 90px 0 0;-webkit-border-radius: 90px 90px 0 0;background:#1E1E1E;}
.btn {background: #274388 linear-gradient(to bottom, #274388, #274388) repeat scroll 0 0;border-radius: 28px;color: #ffffff;font-size: 20px;padding: 10px 20px;text-decoration: none;border:5px solid #38383D;}
.arrow-right {width: 0; height: 0; border-top: 35px solid transparent;border-bottom:34px solid transparent;border-left:35px solid #B22C29;display:inline-block;}
.GoDirection{background-color: #b22c29;color: #fff;display: inline-block;padding: 15px 0;text-align: center;width: 200px;margin:0;float:left;}
.GoDirection strong{display:block;}
a.btn2::after {clear: both;content: ""display: block;}
#triangle-up {margin: 0 auto 20px;width: 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-bottom: 100px solid #274388;}
#triangle-down {margin: 0 auto 20px;width: 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-top: 100px solid #274388;}
#star-five {margin: 60px auto;position: relative;display: block;color: #FED700;width: 0px;height: 0px;border-right:  100px solid transparent;border-bottom: 70px  solid #FED700;
border-left:   100px solid transparent;-moz-transform:    rotate(35deg);-webkit-transform: rotate(35deg);-ms-transform:rotate(35deg);-o-transform:      rotate(35deg);}
#star-five:before {border-bottom: 80px solid #FED700;border-left: 30px solid transparent;border-right: 30px solid transparent;position: absolute;height: 0;width: 0;
top: -45px;left: -65px;display: block;content: '';-webkit-transform: rotate(-35deg);-moz-transform:    rotate(-35deg);-ms-transform:     rotate(-35deg);-o-transform:      rotate(-35deg);}
#star-five:after {position: absolute;display: block;color:#FED700;top: 3px;left: -105px;width: 0px;height: 0px;border-right: 100px solid transparent;border-bottom: 70px solid #FED700;border-left: 100px solid transparent;-webkit-transform: rotate(-70deg);-moz-transform:    rotate(-70deg);-ms-transform:     rotate(-70deg);-o-transform:      rotate(-70deg);content: '';}