HOME
CSS SNIPPETS
ANIMATION
FLEXBOX
HERO HEIGHT
PODS
PSEUDO ELEMENTS
SHAPES
TRANSFORMS
OTHER
LINKS
iOS13 iPad
SHAPES
SHAPES
Documentation:
https://css-tricks.com/the-shapes-of-css/
SQUARE
[SELECTOR] { width: 100px; height: 100px; background: #0083C3; }
RECTANGLE
[SELECTOR] { width: 200px; height: 100px; background: #0083C3; }
CIRCLE
[SELECTOR] { width: 100px; height: 100px; background: #0083C3; border-radius: 50% }
OVAL
[SELECTOR] { width: 200px; height: 100px; background: #0083C3; border-radius: 100px / 50px; }
TRIANGLE UP
[SELECTOR] { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid #0083C3; }
TRIANGLE DOWN
[SELECTOR] { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid #0083C3; }
TRIANGLE LEFT
[SELECTOR] { width: 0; height: 0; border-top: 50px solid transparent; border-right: 100px solid #0083C3; border-bottom: 50px solid transparent; }
TRIANGLE RIGHT
[SELECTOR] { width: 0; height: 0; border-top: 50px solid transparent; border-left: 100px solid #0083C3; border-bottom: 50px solid transparent; }
TRIANGLE TOP LEFT
[SELECTOR] { width: 0; height: 0; border-top: 100px solid #0083C3; border-right: 100px solid transparent; }
TRIANGLE TOP RIGHT
[SELECTOR] { width: 0; height: 0; border-top: 100px solid #0083C3; border-left: 100px solid transparent; }
TRIANGLE BOTTOM LEFT
[SELECTOR] { width: 0; height: 0; border-bottom: 100px solid #0083C3; border-right: 100px solid transparent; }
TRIANGLE BOTTOM RIGHT
[SELECTOR] { width: 0; height: 0; border-bottom: 100px solid #0083C3; border-left: 100px solid transparent; }
Terms of Use
|
Privacy & Cookie Policy
|
Trading Terms
© 2026. The content on this website is owned by us and our licensors. Do not copy any content (including images) without our consent.
Share by: