CSS Geometric Shapes

Following CSS styles will come handy when you want to draw geometric shapes with CSS without using images. Most of them are done using CSS3 and so check if you browser supports it.

Circle

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

Oval

.oval {
	height: 200px;
	width: 100px;
	background: #07CAF3;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
}

Triangle

.triangle {
	height: 0;
	width: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-bottom: 100px solid #07CAF3;
}

Triangle Sided

.triangle-sided {
	height: 0;
	width: 0;
	border-top: 100px solid #07CAF3;
	border-right: 100px solid transparent;
}

Rectangle

.rectangle {
   height: 100px;
   width: 200px; 
   background: #07CAF3;
}

Parallelogram

.parallelogram {
   height: 75px;
   width: 150px; 
   background: #07CAF3;
   -webkit-transform: skew(20deg); 
   -moz-transform: skew(20deg); 
   -o-transform: skew(20deg);
   transform: skew(20deg);
}

Trapezoid

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

Cone

.cone {
  height: 0;
  width: 0;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  border-top: 100px solid #07CAF3;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}

These are all primitive geometric shapes. You can combine these and create more complex shapes like pentagon, hexagon, and more.

Written by Vincy, a web developer with 15+ years of experience and a Masters degree in Computer Science. She specializes in building modern, lightweight websites using PHP, JavaScript, React, and related technologies. Phppot helps you in mastering web development through over a decade of publishing quality tutorials.

↑ Back to Top

• PHP
• jQuery
• JavaScript
• WordPress
• MySQL
• CSS
  • CSS Examples
    • Automatic Column Hiding using CSS in Responsive Table
    • Responsive Social Share Buttons
    • Responsive Web Design
    • Multilevel Dropdown Menu with Pure CSS
    • CSS Geometric Shapes
    • Display Text in Vertical Direction using CSS
    • HTML Element Hover Fade Effect using CSS
    • Web Page Design using CSS
    • Sticky Header using CSS
    • Float DIV in CSS

• Share
• Tweet
• Share

1. Simple PHP Shopping Cart
2. Stripe Payment Gateway Integration using PHP
3. User Registration in PHP with Login: Form with MySQL and Code Download
4. PHP Contact Form
5. How to Create Dynamic Stacked Bar, Doughnut and Pie charts in PHP with Chart.js