CSS Portal
Notifications
New
CSS Logical Properties Converter

Free CSS logical properties converter. Transform margin-left, padding-top, width and more into flow-relative equivalents for RTL and i18n-ready layouts. Includes shorthand conversion and writing mode simulator.
New
Unused CSS Finder

Free tool to find and remove unused CSS. Scan HTML, CSS, and JS to get a cleaned stylesheet, byte savings, and a breakdown of every removable selector.
New
CSS Skeleton Loader Generator

Generate production-ready CSS skeleton loader components instantly. Customize card type, quantity, size, colors, border radius, and animation style
Updated
CSS Validator

CSS Validator has had a complete makeover, it now uses a newly developed CSS validation engine.
New
CSS Position Visualizer

An interactive visual reference for every CSS position value - static, relative, absolute, fixed, and sticky - plus z-index, stacking contexts, and a live layout debugger.
New
CSS @Counter-Style Preview

An interactive CSS @counter-style editor and browser.
New
CSS Specificity Calculator

Compare multiple selectors side by side and see exactly which one the browser will prioritise.
New
CSS Color-mix() Calculator

Professional CSS color mixing tool with support for 11 color spaces including OKLAB, OKLCH, LAB, LCH, and HSL.
New
CSS Centering Guide

Learn how to center elements in CSS using Grid, Flexbox, and Absolute positioning.
New
CSS Clamp() Calculator

This visual clamp calculator helps you generate scalable font sizes and spacing with live previews.
New
CSS Toast Generator

Generate custom, production-ready JavaScript toast notifications in seconds.
Favorites

CSS Shapes

  1. Home
  2. CSS Resources
  3. CSS Shapes

Here you’ll find a collection of geometric shapes created entirely with pure CSS3, without the need for images or SVGs. These examples showcase what’s possible using modern CSS techniques such as borders, transforms, gradients, and pseudo-elements to build clean, scalable shapes.

Please note that not all shapes will render perfectly in every browser. Only browsers with full CSS3 support will display these shapes as intended, while older or less compatible browsers may show visual inconsistencies. For the best results, view and use these shapes in up-to-date modern browsers.

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Square

#square {
   width: 140px;
   height: 140px;
   background: blue;
}

Circle

#circle {
   width: 140px;
   height: 140px;
   background: blue;
   border-radius: 70px;
}

Oval

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

Up Triangle

#up-triangle {
   width: 0;
   height: 0;
   border-bottom: 120px solid blue;
   border-left: 60px solid transparent;
   border-right: 60px solid transparent;
}

Down Triangle

#down-triangle {
   width: 0;
   height: 0;
   border-top: 120px solid blue;
   border-left: 60px solid transparent;
   border-right: 60px solid transparent;
}

Left Triangle

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

Right Triangle

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

Triangle Top Left

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

Triangle Top Right

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

Triangle Bottom Left

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

Triangle Bottom Right

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

Trapezium

#trapezium {
   height: 0;
   width: 80px;
   border-bottom: 80px solid blue;
   border-left: 40px solid transparent;
   border-right: 40px solid transparent;
}

Diamond

#diamond {
   width: 80px;
   height: 80px;
   background: blue;
   margin: 3px 0 0 30px;
   transform: rotate(-45deg);
   transform-origin: 0 100%;
}

Rectangle

#rectangle {
   width: 140px;
   height: 80px;
   background: blue;
}

Parallelogram

#parallelogram {
   width: 130px;
   height: 75px;
   background: blue;
   transform: skew(20deg);
}

Twelve Point Star

#twelve-point-star {
   height: 100px;
   width: 100px;
   background: blue;
   position: relative;
}
#twelve-point-star:before {
   height: 100px;
   width: 100px;
   background: blue;
   content: "";
   position: absolute;
   transform: rotate(30deg);
}
#twelve-point-star:after {
   height: 100px;
   width: 100px;
   background: blue;
   content: "";
   position: absolute;
   transform: rotate(-30deg);
}

Six Point Star

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

Speech Bubble

#speech-bubble {
   width: 120px;
   height: 80px;
   background: blue;
   position: relative;
   border-radius: 10px;
}
#speech-bubble:before {
   content: "";
   position: absolute;
   width: 0;
   height: 0;
   border-top: 13px solid transparent;
   border-right: 26px solid blue;
   border-bottom: 13px solid transparent;
   margin: 13px 0 0 -25px;
}

Egg

#egg {
   display: block;
   width: 126px;
   height: 180px;
   background-color: blue;
   border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

EQ Triangle

#eq-triangle {
   width: 0;
   height: 0;
   border-bottom: 104px solid blue;
   border-left: 60px solid transparent;
   border-right: 60px solid transparent;
}

Pacman

#pacman {
   width: 0px;
   height: 0px;
   border-right: 60px solid transparent;
   border-top: 60px solid blue;
   border-left: 60px solid blue;
   border-bottom: 60px solid blue;
   border-top-left-radius: 60px;
   border-top-right-radius: 60px;
   border-bottom-left-radius: 60px;
   border-bottom-right-radius: 60px;
}

Biohazard

#biohazard {
   width: 0;
   height: 0;
   border-bottom: 60px solid black;
   border-top: 60px solid black;
   border-left: 60px solid yellow;
   border-right: 60px solid yellow;
   border-radius: 60px;
}

Heart

#heart {
   position: relative;
}
#heart:before, #heart:after {
   position: absolute;
   content: "";
   left: 70px; top: 0;
   width: 70px;
   height: 115px;
   background: blue;
   border-radius: 50px 50px 0 0;
   transform: rotate(-45deg);
   transform-origin: 0 100%;
}
#heart:after {
   left: 0;
   transform: rotate(45deg);
   transform-origin: 100% 100%;
}

Yin Yang

#yin-yang {
  height: 120px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: 
   radial-gradient(25% 25% at 50% 25%,blue 24%,#fff 26% 99%,#0000 101%), 
   radial-gradient(25% 25% at 50% 75%,#fff 24%,blue 26% 99%,#0000 101%), 
   conic-gradient(blue 50%, #fff 0);
  border: 1px solid;
}

Octagon

#octagon {
   width: 100px;
   height: 100px;
   background: blue;
   position: relative;
}
#octagon:before {
   height: 0;
   width: 40px;
   content: "";
   position: absolute;
   border-bottom: 30px solid blue;
   border-left: 30px solid white;
   border-right: 30px solid white;
}
#octagon:after {
   height: 0;
   width: 40px;
   content: "";
   position: absolute;
   border-top: 30px solid blue;
   border-left: 30px solid white;
   border-right: 30px solid white;
   margin: 70px 0 0 0;
}
If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!
Sponsors

Copyright © 2026 CSSPortal.com - All Rights Reserved.

Contact Privacy Policy Donations