Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 

  • Shapes of CSS

    @mansi.gupta
    Recommendations Offline Message

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 537
    Comment on it

    Hello Readers!

    In this blog post, let us learn how to create simple shapes that can be made even simpler using CSS. I am providing the code for 5 shapes we might be using then and now. Note that, all of the figures below use only a single HTML element. Try them.

     

    1. SQUARE
    1. #square { 
    2.    width: 100px; 
    3.    height: 100px;   
    4.    background-color: red; 
    5. }

     

     

        2. TRIANGLE

    1. .triangle { 
    2.     width: 0; 
    3.     height: 0; 
    4.     border-left: 50px solid transparent; 
    5.     border-right: 50px solid transparent; 
    6.     border-bottom: 100px solid red; 
    7. }

     

     

        3. CIRCLE

    1. .circle { 
    2.     width: 100px; 
    3.     height: 100px; 
    4.     background: red; 
    5.     -moz-border-radius: 50px; 
    6.     -webkit-border-radius: 50px; 
    7.     border-radius: 50%; 
    8. }

     

     

        4.  STAR

    1. .star-five { 
    2.     margin: 50px 0; 
    3.     position: relative; 
    4.     display: block; 
    5.     color: red; 
    6.     width: 0px; 
    7.     height: 0px; 
    8.     border-right: 100px solid transparent; 
    9.     border-bottom: 70px solid red; 
    10.     border-left: 100px solid transparent; 
    11.     -moz-transform: rotate(35deg); 
    12.     -webkit-transform: rotate(35deg); 
    13.     -ms-transform: rotate(35deg); 
    14.     -o-transform: rotate(35deg); 
    15. } 
    16.  
    17. .star-five:before { 
    18.     border-bottom: 80px solid red; 
    19.     border-left: 30px solid transparent; 
    20.     border-right: 30px solid transparent; 
    21.     position: absolute; 
    22.     height: 0; 
    23.     width: 0; 
    24.     top: -45px; 
    25.     left: -65px; 
    26.     display: block; 
    27.     content: ''; 
    28.     -webkit-transform: rotate(-35deg); 
    29.     -moz-transform: rotate(-35deg); 
    30.     -ms-transform: rotate(-35deg); 
    31.     -o-transform: rotate(-35deg); 
    32. } 
    33.  
    34. .star-five:after { 
    35.     position: absolute; 
    36.     display: block; 
    37.     color: red; 
    38.     top: 3px; 
    39.     left: -105px; 
    40.     width: 0px; 
    41.     height: 0px; 
    42.     border-right: 100px solid transparent; 
    43.     border-bottom: 70px solid red; 
    44.     border-left: 100px solid transparent; 
    45.     -webkit-transform: rotate(-70deg); 
    46.     -moz-transform: rotate(-70deg); 
    47.     -ms-transform: rotate(-70deg); 
    48.     -o-transform: rotate(-70deg); 
    49.     content: ''; 
    50. }

     

     

        5. HEART

    1. .heart { 
    2.     position: relative; 
    3.     width: 100px; 
    4.     height: 90px; 
    5. } 
    6.  
    7. .heart:before, .heart:after { 
    8.     position: absolute; 
    9.     content: ""; 
    10.     left: 50px; 
    11.     top: 0; 
    12.     width: 50px; 
    13.     height: 80px; 
    14.     background: red; 
    15.     -moz-border-radius: 50px 50px 0 0; 
    16.     border-radius: 50px 50px 0 0; 
    17.     -webkit-transform: rotate(-45deg); 
    18.     -moz-transform: rotate(-45deg); 
    19.     -ms-transform: rotate(-45deg); 
    20.     -o-transform: rotate(-45deg); 
    21.     transform: rotate(-45deg); 
    22.     -webkit-transform-origin: 0 100%; 
    23.     -moz-transform-origin: 0 100%; 
    24.     -ms-transform-origin: 0 100%; 
    25.     -o-transform-origin: 0 100%; 
    26.     transform-origin: 0 100%; 
    27. } 
    28.  
    29. .heart:after { 
    30.     left: 0; 
    31.     -webkit-transform: rotate(45deg); 
    32.     -moz-transform: rotate(45deg); 
    33.     -ms-transform: rotate(45deg); 
    34.     -o-transform: rotate(45deg); 
    35.     transform: rotate(45deg); 
    36.     -webkit-transform-origin: 100% 100%; 
    37.     -moz-transform-origin: 100% 100%; 
    38.     -ms-transform-origin: 100% 100%; 
    39.     -o-transform-origin: 100% 100%; 
    40.     transform-origin :100% 100%; 
    41. }

     

    Keep Coding. :)

    html css css3 Webkit transform rotate
    Comment on it

 0 Comment(s)

Sign In
Forgot Password?
                           OR                           
Create an account !!
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Reset Password
Fill out the form below and reset your password: