Anamika Gupta
Anamika Gupta
Expert in HTML, CSS, JavaScript, PHP, Codeignitor, Photoshop
October 11, 2018

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:
How To Create Different Shapes with CSSThe Shapes of CSSHow to Quickly Create Shapes in Pure CSSHow to Create a Responsive Square with CSSCSS ShapesCss to make squareCSS to make rectangleCSS to make parallelogramCSS to make TrapezoidCSS to make rhombusCSS to make kiteCSS to make circleCSS to make semi-circleCSS to make ovalCSS to make ellipsesCSS to make semi-circle-rightCSS to make semi-circle-leftCSS to make semi-circle-bottomCSS to make quarter circle top-leftCSS to make quarter circle top-rightCSS to make quarter circle bottom-rightCSS to make quarter circle bottom-leftCSS to make triangle upCSS to make triangleCSS to make triangle downCSS to make triangle leftCSS to make triangle rightCSS to make triangle top-leftCSS to make triangle top-rightCSS to make bottom-leftCSS to make triangle bottom-right

Vertical center align div using CSSSet Input Placeholder color using CSSWorking with Shape : Using CSS TricksCreate same height of multiple div using CSSCreate sticky footer in Html using CSSUse of Font Awesome icons in different shapesBasic of SassConvert colorful image into Black or White or Greyscale using CSS filterFading Image and Text on mouseover using html and cssImage and text Overlay using html and cssHow to Flip the image and text on mouse over using HTML and CSS