Working with Shape : Using CSS Tricks

HTML 

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

<h4>CSS: Square</h4>
<div class="square"></div>

<h4>CSS: Rectangle</h4>
<div class="rectangle"></div>

<h4>CSS: Parallelogram </h4>
<div class="parallelogram"></div>

<h4>CSS: Trapezoid </h4>
<div class="trapezoid "></div>

<h4>CSS: Rhombus </h4>
<div class="rhombus "></div>

<h4>CSS: Kite </h4>
<div class="kite "></div>

</body>
</html>

CSS

.square { height: 60px;   
           width: 60px;  
           background-color: #afd612;
         }

.rectangle { height: 57px;
             width: 100px;  
             background-color: #b6ec61;
           }

.parallelogram { width: 118px; 
                 height: 68px;
                 transform: skew(20deg);  
                 background:#78bf09;
               }
     
.trapezoid { border-bottom: 53px solid #588c07; 
             border-left: 28px solid transparent;
             border-right: 54px solid transparent; 
             height: 0;  
             width: 126px; 
           }
        
.rhombus { background: #7aa538; 
           margin: 45px;   
           width: 113px; 
           height: 84px;
           transform: skewX(45deg); 
         }
        
.kite { width: 100px; 
        height: 100px;  
        background: #3f5222; 
        transform: skew(180deg, 180deg) rotate(45deg); margin: 30px; 
      }

Output:

CSS: Square

CSS: Rectangle

CSS: Parallelogram

CSS: Trapezoid

CSS: Rhombus

CSS: Kite




HTML 

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

<h4>CSS: Circle </h4>
<div class="circle"></div>

<h4>CSS: Oval </h4>
<div class="oval"></div>

<h4>CSS: Ellipses </h4>
<div class="ellipses"></div>

<h4>CSS: Semi-Circle </h4>
<div class="semi-circle"></div>

<h4>CSS: Semi-Circle-Right </h4>
<div class="semi-circle-right"></div>

<h4>CSS: Semi-Circle-Left </h4>
<div class="semi-circle-left"></div>

<h4>CSS: Semi-Circle-Bottom </h4>
<div class="semi-circle-bottom"></div>

<h4>CSS: Quarter Circle Top-Left </h4>
<div class="quarterCircleTopLeft"></div>

<h4>CSS: Quarter Circle Top-Right </h4>
<div class="quarterCircleTopRight"></div>

<h4>CSS: Quarter Circle Bottom-Left</h4>
<div class="quarterCircleBottomLeft"></div>

<h4>CSS: Quarter Circle Bottom-Right</h4>
<div class="quarterCircleBottomRight"></div>


</body>
</html>

CSS

.circle {  height: 100px;  
            width: 100px; 
            background-color: #ffe0b3; 
            border-radius: 50%; 
         }
  
 .oval {  height: 50px; 
          width: 100px; 
          background-color: #ffcc80; 
          border-radius: 50%;
       }

 .ellipses { height: 100px;
             width: 52px;
             background-color:#ffb84d;
             border-radius: 50%;
           }

.semi-circle { height: 50px;
               width: 100px;
               border-radius: 90px 90px 0 0;
               background: #ffa31a;
             }

.semi-circle-right { height: 100px;
                     width: 50px;
                     border-radius: 0 90px 90px 0;
                     background: #e68a00;
                   }

.semi-circle-left { height:100px;
                    width:50px;
                    border-radius: 90px 0 0 90px;
                    background: #b36b00;
                  }

.semi-circle-bottom { height:50px;
                      width:100px;
                      border-radius: 0 0 90px 90px;
                      background:#804d00;
                    }

.quarterCircleTopLeft { width: 100px;
                        height: 100px;
                        background: #ff99cc;
                        border-radius: 90px 0 0 0;
                      }

.quarterCircleTopRight { width:100px;
                         height:100px;
                         background:  #ff66b3;
                         border-radius: 0 90px 0 0;
                       }

.quarterCircleBottomLeft { width:100px;
                           height:100px;
                           background: #ff3399;
                           border-radius: 0 0 90px 0;
                         }

.quarterCircleBottomRight { width:100px;
                            height:100px;
                            background: #e60073;
                            border-radius: 0 0 0 90px;
                          }

Output:

CSS: Circle

CSS: Oval

CSS: Ellipses

CSS: Semi-Circle

CSS: Semi-Circle-Right

CSS: Semi-Circle-Left

CSS: Semi-Circle-Bottom

CSS: Quarter Circle Top-Left

CSS: Quarter Circle Top-Right

CSS: Quarter Circle Bottom-Left

CSS: Quarter Circle Bottom-Right




HTML 

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

<h4>CSS: Triangle Up</h4>
<div class="triangle-up"></div>

<h4>CSS: Triangle Down</h4>
<div class="triangle-down"></div>

<h4>CSS: Triangle Left</h4>
<div class="triangle-left"></div>

<h4>CSS: Triangle Right</h4>
<div class="triangle-right"></div>

<h4>CSS: Triangle Top-Left</h4>
<div class="triangleTopLeft"></div>

<h4>CSS: Triangle Top-Right</h4>
<div class="triangleTopRight"></div>

<h4>CSS: Triangle Bottom-Left</h4>
<div class="triangleBottomLeft"></div>

<h4>CSS: Triangle Bottom-Right</h4>
<div class="triangleBottomRight"></div>

</body>
</html>

CSS

.triangle-up { width: 0;
               height: 0;
               border-left: 25px solid transparent;
               border-right: 25px solid transparent;
               border-bottom: 50px solid #ecc6ec;
             }

.triangle-down { width: 0;
                 height: 0;
                 border-left: 25px solid transparent;
                 border-right: 25px solid transparent;
                 border-top: 50px solid #df9fdf;
               }

.triangle-left { width: 0;
                 height: 0;
                 border-top: 25px solid transparent;
                 border-right: 50px solid  #bf40bf;
                 border-bottom: 25px solid transparent;
                }

.triangle-right { width: 0;
                  height: 0;
                  border-top: 25px solid transparent;
                  border-left: 50px solid #993399;
                  border-bottom: 25px solid transparent;
                }

.triangleTopLeft { width: 0;
                   height: 0;
                   border-right: 40px solid transparent;
                   border-top: 40px solid #809fff;
                   border-left: 40px solid #809fff;
                   border-bottom: 40px solid transparent;
                }

.triangleTopRight { width:0;
                    height:0;
                    border-right:40px solid #4d79ff;
                    border-top:40px solid  #4d79ff;
                    border-left:40px solid transparent;
                    border-bottom:40px solid transparent;
                  }

.triangleBottomLeft { width:0;
                      height:0;
                      border-right:40px solid transparent;
                      border-top:40px solid transparent;
                      border-left:40px solid  #1a53ff;
                      border-bottom:40px solid #1a53ff;
                   }

.triangleBottomRight { width:0;
                       height:0;
                       border-right:40px solid #0033cc;
                       border-top:40px solid transparent;
                       border-left:40px solid transparent;
                       border-bottom:40px solid #0033cc;
                     }
.triangle-up { width: 0;
               height: 0;
               border-left: 25px solid transparent;
               border-right: 25px solid transparent;
               border-bottom: 50px solid #ecc6ec;
             }

.triangle-down { width: 0;
                 height: 0;
                 border-left: 25px solid transparent;
                 border-right: 25px solid transparent;
                 border-top: 50px solid #df9fdf;
               }

.triangle-left { width: 0;
                 height: 0;
                 border-top: 25px solid transparent;
                 border-right: 50px solid  #bf40bf;
                 border-bottom: 25px solid transparent;
                }

.triangle-right { width: 0;
                  height: 0;
                  border-top: 25px solid transparent;
                  border-left: 50px solid #993399;
                  border-bottom: 25px solid transparent;
                }

.triangleTopLeft { width: 0;
                   height: 0;
                   border-right: 40px solid transparent;
                   border-top: 40px solid #809fff;
                   border-left: 40px solid #809fff;
                   border-bottom: 40px solid transparent;
                }

.triangleTopRight { width:0;
                    height:0;
                    border-right:40px solid #4d79ff;
                    border-top:40px solid  #4d79ff;
                    border-left:40px solid transparent;
                    border-bottom:40px solid transparent;
                  }

.triangleBottomLeft { width:0;
                      height:0;
                      border-right:40px solid transparent;
                      border-top:40px solid transparent;
                      border-left:40px solid  #1a53ff;
                      border-bottom:40px solid #1a53ff;
                   }

.triangleBottomRight { width:0;
                       height:0;
                       border-right:40px solid #0033cc;
                       border-top:40px solid transparent;
                       border-left:40px solid transparent;
                       border-bottom:40px solid #0033cc;
                     }

Output:

CSS: Triangle Up

CSS: Triangle Down

CSS: Triangle Left

CSS: Triangle Right

CSS: Triangle Top-Left

CSS: Triangle Top-Right

CSS: Triangle Bottom-Left

CSS: Triangle Bottom-Right


Keywords: