Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Learn how to create different shapes using CSS technique.

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 116
    Comment on it

    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: '';}
    	

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: