CSS { Cascading Style Sheets }: CSS Shapes [1]

All of the below use only a single HTML element. Any kind of CSS goes, as long as it's supported in at least one browser.

square
rectangle
circle
oval
triangle-up
triangle-down
triangle-left
triangle-right
triangle-topleft
triangle-topright
triangle-bottomleft
triangle-bottomright
curved arrow
trapezoid
parallelogram
star-six

Example :
<html>
   <head>
      <style>
#square { width: 100px; height: 100px; background: skyblue; }

#rectangle { width: 200px; height: 100px; background: skyblue; }

#circle { width: 100px; height: 100px; background: skyblue; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; }

#oval { width: 200px; height: 100px; background: skyblue; -moz-border-radius: 100px / 50px; -webkit-border-radius: 100px / 50px; border-radius: 100px / 50px; }

#triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid skyblue; }

#triangle-down { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid skyblue; }

#triangle-left { width: 0; height: 0; border-top: 50px solid transparent; border-right: 100px solid skyblue; border-bottom: 50px solid transparent; }

#triangle-right { width: 0; height: 0; border-top: 50px solid transparent; border-left: 100px solid skyblue; border-bottom: 50px solid transparent; }

#triangle-topleft { width: 0; height: 0; border-top: 100px solid skyblue; border-right: 100px solid transparent; }

#triangle-topright { width: 0; height: 0; border-top: 100px solid skyblue; border-left: 100px solid transparent; }

#triangle-bottomleft { width: 0; height: 0; border-bottom: 100px solid skyblue; border-right: 100px solid transparent; }

#triangle-bottomright { width: 0; height: 0; border-bottom: 100px solid skyblue; border-left: 100px solid transparent; }

#curvedarrow { position: relative; width: 0; height: 0; border-top: 9px solid transparent; border-right: 9px solid red; -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -ms-transform: rotate(10deg); -o-transform: rotate(10deg); } #curvedarrow:after { content: ""; position: absolute; border: 0 solid transparent; border-top: 3px solid red; border-radius: 20px 0 0 0; top: -12px; left: -9px; width: 12px; height: 12px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); }

#trapezoid { border-bottom: 100px solid red; border-left: 50px solid transparent; border-right: 50px solid transparent; height: 0; width: 100px; }

#parallelogram { width: 150px; height: 100px; -webkit-transform: skew(20deg); -moz-transform: skew(20deg); -o-transform: skew(20deg); background: red; }

#star-six { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; position: relative; } #star-six:after { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid red; position: absolute; content: ""; top: 30px; left: -50px; }

      </style>
</head>
   <body>

   <table border = "1" cellpadding = "4" cellspacing ="6" width="100%">
   <tr align="center">
      <td width="25%">square <div id="square"></div></td>
    <td width="25%">rectangle <div id="rectangle"></div></td>
    <td width="25%">circle <div id="circle"></div></td>
    <td width="25%">oval <div id="oval"></div></td>
   </tr>
   <tr align="center">
      <td width="25%">triangle-up <div id="triangle-up"></div></td>
    <td width="25%">triangle-down <div id="triangle-down"></div></td>
    <td width="25%">triangle-left <div id="triangle-left"></div></td>
    <td width="25%">triangle-right <div id="triangle-right"></div></td>
   </tr>
   <tr align="center">
      <td width="25%">triangle-topleft <div id="triangle-topleft"></div></td>
    <td width="25%">triangle-topright <div id="triangle-topright"></div></td>
    <td width="25%">triangle-bottomleft <div id="triangle-bottomleft"></div></td>
    <td width="25%">triangle-bottomright <div id="triangle-bottomright"></div></td>
   </tr>
   <tr align="center">
      <td width="25%">curved arrow <br/><br/><div id="curvedarrow"></div></td>
    <td width="25%">trapezoid <div id="trapezoid"></div></td>
    <td width="25%">parallelogram <div id="parallelogram"></div></td>
    <td width="25%">star-six <div id="star-six"></div><br/><br/></td>
   </tr>
   </table>
   </body>
</html>

Output :

CSS { Cascading Style Sheets }

18 September 2016

CSS Shapes [1]

No comments:

Post a Comment