Pure CSS Beautiful Shapes and Symbols a2zwebhelp

As we know CSS is used to describing the presentation of Web pages, including colors, layout, fonts, etc. CSS is also capable of making different types of shapes and symbols. Let’s create some shape in CSS.

Square

.csssquare{ 
width: 140px; 
height: 140px; 
background:#15549a; 
}

Rectangle

.cssrectangle{ 
width: 140px; 
height: 80px; 
background:#15549a; 
}

Parallelogram

.cssparallelogram { 
width: 140px; 
height: 100px; 
transform: skew(-20deg); 
background: #15549a; 
}

Pentagon

.csspentagon{ 
position: relative;
width: 80px;
box-sizing: content-box;
border-width: 70px 30px 0;
border-style: solid;
border-color: #15549a transparent;
top: 50px; 
} 

.csspentagon:before { 
content: "";
position: absolute;
height: 0;
width: 0;
top: -120px;
left: -30px;
border-width: 0px 70px 50px;
border-style: solid;
border-color: transparent transparent #15549a;
}

Hexagon

.csshexagon{ 
width: 130px;
height: 65px;
background: #15549a;
position: relative;
top: 35px; 
} 
.csshexagon:before { 
content: "";
position: absolute;
top: -35px;
left: 0;
width: 0;
height: 0;
border-left: 65px solid transparent;
border-right: 65px solid transparent;
border-bottom: 35px solid #15549a;
} 
.csshexagon:after { 
content: "";
position: absolute;
bottom: -35px;
left: 0;
width: 0;
height: 0;
border-left: 65px solid transparent;
border-right: 65px solid transparent;
border-top: 35px solid #15549a;
}

Octagon

.cssoctagon{ 
width: 120px; 
height: 120px; 
background: #15549a; 
position: relative; 
} 
.cssoctagon:before { 
content: ""; 
width: 120px; 
height: 0; 
position: absolute; 
top: 0; 
left: 0; 
border-bottom: 34px solid #15549a; 
border-left: 34px solid #FFF; 
border-right: 34px solid #FFF; 
} 
.cssoctagon:after { 
content: ""; 
width: 120px; 
height: 0; 
position: absolute; 
bottom: 0; 
left: 0; 
border-top: 34px solid #15549a; 
border-left: 34px solid #FFF; 
border-right: 34px solid #FFF; 
}

Circle

.csscircle{ 
width: 140px; 
height: 140px; 
background:#15549a; 
border-radius: 50%
}

Oval

.cssoval{ 
width: 140px; 
height: 80px; 
background:#15549a; 
border-radius: 50%
}

Trapezoid

.csstrapezoid { 
height: 0; 
width: 140px;  
border-bottom: 100px solid #15549a; 
border-left: 25px solid transparent; 
border-right: 25px solid transparent; 
}

Triangle

.csstriangle{ 
width: 0; 
height: 0; 
border-left: 50px solid transparent; 
border-right: 50px solid transparent; 
border-bottom: 100px solid #15549a;
}

Down Triangle

.cssdowntriangle{ 
width: 0; 
height: 0; 
border-left: 50px solid transparent; 
border-right: 50px solid transparent; 
border-top: 100px solid #15549a;
}

Left Triangle

.csslefttriangle{ 
width: 0; 
height: 0; 
border-top: 50px solid transparent; 
border-right: 100px solid #15549a; 
border-bottom: 50px solid transparent;
}

Right Triangle

.cssrighttriangle{ 
width: 0; 
height: 0; 
border-top: 50px solid transparent; 
border-left: 100px solid #15549a; 
border-bottom: 50px solid transparent;
}

Top Left Triangle

.csstoplefttriangle {   
width: 0; 
height: 0; 
border-top: 100px solid #15549a; 
border-right: 100px solid transparent; 
}

Top Right Triangle

.csstoprighttriangle{  
width: 0; 
height: 0; 
border-top: 100px solid #15549a; 
border-left: 100px solid transparent; 
}

Bottom Left Triangle

.cssblefttriangle {   
width: 0; 
height: 0; 
border-bottom: 100px solid #15549a; 
border-right: 100px solid transparent; 
}

Bottom Right Triangle

.cssbrighttriangle {
width: 0; 
height: 0;
border-bottom: 100px solid #15549a; 
border-left: 100px solid transparent; 
}

Five Points Star

.css5star {
    margin: 62px 0;
    position: relative;
    display: block;
    width: 0px;
    height: 0px;
    border-right: 86px solid transparent;
    border-bottom: 60px solid #15549a;
    border-left: 75px solid transparent;
    transform: rotate(38deg);
} 

.css5star::before {
    border-bottom: 85px solid #15549a;
    border-left: 29px solid transparent;
    border-right: 30px solid transparent;
    position: absolute;
    height: 0;
    width: 0;
    top: -50px;
    left: -56px;
    display: block;
    content: '';
    transform: rotate(-38deg);
}
.css5star::after {
    position: absolute;
    display: block;
    top: 1px;
    left: -78px;
    width: 0px;
    height: 0px;
    border-right: 80px solid transparent;
    border-bottom: 60px solid #15549a;
    border-left: 80px solid transparent;
    transform: rotate(-75deg);
    content: '';
}

Heart

.cssheart{
position: relative;
width: 130px;
height: 115px;
left: -20px;
top: 10px;
} 
.cssheart:before, .cssheart:after { 
position: absolute;
content: "";
left: 80px;
top: 0;
width: 80px;
height: 120px;
background: #FF0000;
border-radius: 50px 50px 0 0;
transform: rotate(-45deg);
transform-origin: 0 100%;
}
.cssheart:after { 
left: 0; 
transform: rotate(45deg); 
transform-origin: 100% 100%; 
}

Cut Diamond

.csscutdiamond{ 
border-style: solid; 
border-color: transparent transparent #15549a transparent; 
border-width: 0 25px 25px 25px; 
height: 0; 
width: 50px; 
box-sizing: content-box; 
position: relative; 
margin: 20px 0 50px 0; 
} 
.csscutdiamond:after { 
content: ""; 
position: absolute; 
top: 25px; 
left: -25px; 
width: 0; 
height: 0; 
border-style: solid; 
border-color: #15549a transparent transparent transparent; 
border-width: 70px 50px 0 50px;
}

Shapes and Symbols in CSS