Фигуры CSS

На странице примеры фигур CSS которое можно нарисовать кодом, большинство из них нарисованы свойствами и значениями CSS3. Геометрические фигуры на CSS.

Оглавление:
  1. Square
  2. Circle
  3. Oval
  4. Up Triangle
  5. Down Triangle
  6. Left Triangle
  7. Right Triangle
  8. Triangle Top Left
  9. Triangle Top Right
  10. Triangle Bottom Left
  11. Triangle Bottom Right
  12. Trapezium
  13. Diamond
  14. Diamond Shield
  15. Diamond Narrow
  16. Cut Diamond
  17. Rectangle
  18. Parallelogram
  19. Twelve Point Star
  20. Six Point Star
  21. Star (5-points)
  22. 8 Point Burst
  23. Yin Yang
  24. Badge Ribbon
  25. Space Invader
  26. TV Screen
  27. Chevron
  28. Magnifying Glass
  29. Pentagon
  30. Hexagon
  31. Octagon
  32. Speech Bubble
  33. Egg
  34. EQ Triangle
  35. Pacman
  36. Biohazard
  37. Heart
  38. Infinity
  39. curvedarrow

Square

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

Circle

#circle { 
   width: 140px;
   height: 140px;
   background: slategray; 
   -moz-border-radius: 70px; 
   -webkit-border-radius: 70px; 
   border-radius: 70px;
}

Oval

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

Up Triangle

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

Down Triangle

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

Left Triangle

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

Right Triangle

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

Triangle Top Left

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

Triangle Top Right

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

Triangle Bottom Left

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

Triangle Bottom Right

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

Trapezium

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

Diamond

#diamond {
   width: 80px; 
   height: 80px; 
   background: slategray;
   margin: 3px 0 0 30px;
   /* Rotate */
   -webkit-transform: rotate(-45deg);
   -moz-transform: rotate(-45deg);
   -ms-transform: rotate(-45deg);
   -o-transform: rotate(-45deg);
   transform: rotate(-45deg);
   /* Rotate Origin */
   -webkit-transform-origin: 0 100%;
   -moz-transform-origin: 0 100%;
   -ms-transform-origin: 0 100%;
   -o-transform-origin: 0 100%;
   transform-origin: 0 100%;
}

Diamond Shield

#diamond-shield { 
    width: 0; 
    height: 0; 
    border: 50px solid transparent; 
    border-bottom: 20px solid slategray; 
    position: relative; top: -50px; 
} 
#diamond-shield:after { 
    content: ''; 
    position: absolute; 
    left: -50px; 
    top: 20px; 
    width: 0; 
    height: 0; 
    border: 50px solid transparent; 
    border-top: 70px solid slategray; 
}

Diamond Narrow

#diamond-narrow { 
    width: 0; 
    height: 0; 
    border: 50px solid transparent; 
    border-bottom: 70px solid slategray; 
    position: relative; top: -50px; 
} 
#diamond-narrow:after { 
    content: ''; 
    position: absolute; 
    left: -50px; top: 70px; 
    width: 0; 
    height: 0; 
    border: 50px solid transparent; 
    border-top: 70px solid slategray; 
}

Cut Diamond

#cut-diamond { 
    border-style: solid; 
    border-color: transparent transparent slategray transparent; 
    border-width: 0 25px 25px 25px; 
    height: 0; 
    width: 50px; 
    position: relative; 
    margin: 20px 0 50px 0; 
} 
#cut-diamond:after { 
    content: ""; 
    position: absolute; 
    top: 25px; 
    left: -25px; 
    width: 0; 
    height: 0; 
    border-style: solid; 
    border-color: slategray transparent transparent transparent; 
    border-width: 70px 50px 0 50px; 
}

Rectangle

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

Parallelogram

#parallelogram {
   width: 130px; 
   height: 75px;
   background: slategray;
   /* Skew */
   -webkit-transform: skew(20deg); 
   -moz-transform: skew(20deg); 
   -o-transform: skew(20deg);
   transform: skew(20deg);
}

Twelve Point Star

 

#twelve-point-star {
   height: 100px;
   width: 100px;
   background: slategray;
   position: absolute;
}
#twelve-point-star:before {
   height: 100px;
   width: 100px;
   background: slategray;
   content:"";
   position: absolute;
   /* Rotate */
   -moz-transform: rotate(30deg);
   -webkit-transform: rotate(30deg);
   -ms-transform: rotate(30deg);
   -o-transform: rotate(30deg);
   transform: rotate(30deg);
}
#twelve-point-star:after {
   height: 100px;
   width: 100px;
   background: slategray;
   content:"";
   position: absolute;
   /* Rotate */
   -moz-transform: rotate(-30deg);
   -webkit-transform: rotate(-30deg);
   -ms-transform: rotate(-30deg);
   -o-transform: rotate(-30deg);
   transform: rotate(-30deg);
}
К началу

Six Point Star

#six-point-star {
   position: absolute;
   width: 0; 
   height: 0; 
   border-left: 50px solid transparent; 
   border-right: 50px solid transparent; 
   border-bottom: 80px solid slategray;
}
#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 slategray;
   margin: 30px 0 0 -50px;
}

Star (5-points)

#star-five { 
      margin: 50px 0; 
      position: relative; 
      display: block; 
      color: slategray; 
      width: 0px; 
      height: 0px; 
      border-right: 100px solid transparent; 
      border-bottom: 70px solid slategray; 
      border-left: 100px solid transparent; 
      -moz-transform: rotate(35deg); 
      -webkit-transform: rotate(35deg); 
      -ms-transform: rotate(35deg); 
      -o-transform: rotate(35deg); 
} 
#star-five:before { 
      border-bottom: 80px solid slategray; 
      border-left: 30px solid transparent; 
      border-right: 30px solid transparent; 
      position: absolute; 
      height: 0; 
      width: 0; 
      top: -45px; 
      left: -65px; 
      display: block; 
      content: ''; 
      -webkit-transform: rotate(-35deg); 
      -moz-transform: rotate(-35deg); 
      -ms-transform: rotate(-35deg); 
      -o-transform: rotate(-35deg); 
} 
#star-five:after { 
      position: absolute; 
      display: block; 
      color: slategray; 
      top: 3px; 
      left: -105px; 
      width: 0px; 
      height: 0px; 
      border-right: 
      100px solid transparent; 
      border-bottom: 70px solid slategray; 
      border-left: 100px solid transparent; 
      -webkit-transform: rotate(-70deg); 
      -moz-transform: rotate(-70deg); 
      -ms-transform: rotate(-70deg); 
      -o-transform: rotate(-70deg); 
      content: ''; 
}
К началу

8 Point Burst

#burst-8 {
    background: slategray;
    height: 80px;
    position: relative;
    text-align: center;
    transform: rotate(20deg);
    width: 80px;
}
#burst-8:before {
    background: slategray;
    content: "";
    height: 80px;
    left: 0;
    position: absolute;
    top: 0;
    transform: rotate(135deg);
    width: 80px;
}

Yin Yang

 
#yin-yang { 
    width: 96px; 
    height: 48px; 
    background: #eee; 
    border-color: slategray; 
    border-style: solid; 
    border-width: 2px 2px 50px 2px; 
    border-radius: 100%; 
    position: relative; 
} 
#yin-yang:before { 
    content: ""; 
    position: absolute; 
    top: 50%; 
    left: 0; 
    background: #eee; 
    border: 18px solid slategray; 
    border-radius: 100%; 
    width: 12px; 
    height: 12px; 
} 
#yin-yang:after { 
    content: ""; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    background: slategray; 
    border: 18px solid #eee; 
    border-radius: 100%; 
    width: 12px; 
    height: 12px; 
}
К началу

Badge Ribbon

 
#badge-ribbon { 
    position: relative; 
    background: slategray; 
    height: 100px; 
    width: 100px; 
    -moz-border-radius: 50px; 
    -webkit-border-radius: 50px; 
    border-radius: 50px; 
} 
#badge-ribbon:before, 
#badge-ribbon:after { 
    content: ''; 
    position: absolute; 
    border-bottom: 70px solid slategray; 
    border-left: 40px solid transparent; 
    border-right: 40px solid transparent; 
    top: 70px; left: -10px; 
    -webkit-transform: rotate(-140deg); 
    -moz-transform: rotate(-140deg); 
    -ms-transform: rotate(-140deg); 
    -o-transform: rotate(-140deg); 
} 
#badge-ribbon:after { 
    left: auto; 
    right: -10px; 
    -webkit-transform: rotate(140deg); 
    -moz-transform: rotate(140deg); 
    -ms-transform: rotate(140deg); 
    -o-transform: rotate(140deg); 
}
К началу

Space Invader

 
#space-invader { 
    box-shadow: 0 0 0 1em slategray, 
    0 1em 0 1em slategray, 
    -2.5em 1.5em 0 .5em slategray, 
    2.5em 1.5em 0 .5em slategray, 
    -3em -3em 0 0 slategray, 
    3em -3em 0 0 slategray, 
    -2em -2em 0 0 slategray, 
    2em -2em 0 0 slategray, 
    -3em -1em 0 0 slategray, 
    -2em -1em 0 0 slategray, 
    2em -1em 0 0 slategray, 
    3em -1em 0 0 slategray, 
    -4em 0 0 0 slategray, 
    -3em 0 0 0 slategray, 
    3em 0 0 0 slategray, 
    4em 0 0 0 slategray, 
    -5em 1em 0 0 slategray, 
    -4em 1em 0 0 slategray, 
    4em 1em 0 0 slategray, 
    5em 1em 0 0 slategray, 
    -5em 2em 0 0 slategray, 
    5em 2em 0 0 slategray, 
    -5em 3em 0 0 slategray, 
    -3em 3em 0 0 slategray, 
    3em 3em 0 0 slategray, 
    5em 3em 0 0 slategray, 
    -2em 4em 0 0 slategray, 
    -1em 4em 0 0 slategray, 
    1em 4em 0 0 slategray, 
    2em 4em 0 0 slategray; 
    
    background: slategray; 
    width: 1em; 
    height: 1em; 
    overflow: hidden; 
    margin: 50px 0 70px 65px; 
}
К началу

TV Screen

#tv { 
     position: relative; 
     width: 200px; 
     height: 150px; 
     margin: 20px 0; 
     background: slategray; 
     border-radius: 50% / 10%; 
     color: white; text-align: 
     center; text-indent: .1em; 
} 
#tv:before { 
    content: ''; 
    position: absolute; 
    top: 10%; 
    bottom: 10%; 
    right: -5%; 
    left: -5%; 
    background: inherit; 
    border-radius: 5% / 50%; 
}

Chevron

#chevron { 
    position: relative; 
    text-align: center; 
    padding: 12px; 
    margin-bottom: 6px; 
    height: 60px; 
    width: 200px; 
} 
#chevron:before { 
    content: ''; 
    position: absolute; 
    top: 0; 
    left: 0; 
    height: 100%; 
    width: 51%; 
    background: slategray; 
    -webkit-transform: skew(0deg, 6deg); 
    -moz-transform: skew(0deg, 6deg); 
    -ms-transform: skew(0deg, 6deg); 
    -o-transform: skew(0deg, 6deg); 
    transform: skew(0deg, 6deg); 
} 
#chevron:after { 
    content: ''; 
    position: absolute; 
    top: 0; 
    right: 0; 
    height: 100%; 
    width: 50%; 
    background: slategray; 
    -webkit-transform: skew(0deg, -6deg); 
    -moz-transform: skew(0deg, -6deg); 
    -ms-transform: skew(0deg, -6deg); 
    -o-transform: skew(0deg, -6deg); 
    transform: skew(0deg, -6deg); 
}​
К началу

Magnifying Glass

#magnifying-glass { 
    font-size: 10em; /* This controls the size. */ 
    display: inline-block; 
    width: 0.4em; 
    height: 0.4em; 
    border: 0.1em solid slategray; 
    position: relative; 
    border-radius: 0.35em; 
} 
#magnifying-glass::before { 
    content: ""; 
    display: inline-block; 
    position: absolute; 
    right: -0.25em; 
    bottom: -0.1em; 
    border-width: 0; 
    background: slategray; 
    width: 0.35em; 
    height: 0.08em; 
    -webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg); 
    -ms-transform: rotate(45deg); 
    -o-transform: rotate(45deg); 
}

Pentagon

#pentagon { 
      position: relative; 
      width: 54px; 
      border-width: 50px 18px 0; 
      border-style: solid; 
      border-color: slategray transparent; 
} 
#pentagon:before { 
      content: ""; 
      position: absolute; 
      height: 0; 
      width: 0; 
      top: -85px; 
      left: -18px; 
      border-width: 0 45px 35px; 
      border-style: solid; 
      border-color: transparent transparent slategray; 
}

Hexagon

#hexagon { 
       width: 100px; 
       height: 55px; 
       background: slategray; 
       position: relative; 
 } 
#hexagon:before { 
      content: ""; 
      position: absolute; 
      top: -25px; 
      left: 0; 
      width: 0; 
      height: 0; 
      border-left: 50px solid transparent; 
      border-right: 50px solid transparent; 
      border-bottom: 25px solid slategray; 
} 
#hexagon:after { 
      content: ""; 
      position: absolute; 
      bottom: -25px; 
      left: 0; 
      width: 0; 
      height: 0; 
      border-left: 
      50px solid transparent; 
      border-right: 50px solid transparent; 
      border-top: 25px solid slategray; 
}
К началу

Octagon

#octagon {
   width: 100px; 
   height: 100px; 
   background: slategray;
}
#octagon:before {
   height: 0;
   width: 40px;
   content:"";
   position: absolute; 
   border-bottom: 30px solid slategray;
   border-left: 30px solid white; 
   border-right: 30px solid white; 
}
#octagon:after {
   height: 0;
   width: 40px;
   content:"";
   position: absolute; 
   border-top: 30px solid slategray; 
   border-left: 30px solid white;  
   border-right: 30px solid white; 
   margin: 70px 0 0 0;
}

Speech Bubble

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

Egg

#egg {
   display:block;
   width:126px; 
/* width has to be 70% of height */
/* could use width:70%; in a square container */
   height:180px;
   background-color:slategray;

/* beware that Safari needs actual
 px for border radius (bug) */
   -webkit-border-radius:63px 63px 63px 63px/
   108px 108px 72px 72px;
   /* fails in Safari, but overwrites in Chrome */
   border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
}

EQ Triangle

#eq-triangle {
  width: 0;
  height: 0;
  border-bottom: 104px solid slategray;
  /* 104 = 120 * 0.866 */
  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 slategray;
  border-left: 60px solid slategray;
  border-bottom: 60px solid slategray;
  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;
  -moz-border-radius: 60px; 
  -webkit-border-radius: 60px; 
  border-radius: 60px;
}

Heart

#heart { 
	position: relative;
}
#heart:before, #heart:after {
	position: absolute;
  content: "";
	left: 70px; top: 0;
	width: 70px;
	height: 115px;
	background: slategray;
	-moz-border-radius: 50px 50px 0 0;
	border-radius: 50px 50px 0 0;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);

	transform: rotate(-45deg);
	-webkit-transform-origin: 0 100%;
	-moz-transform-origin: 0 100%;
	-ms-transform-origin: 0 100%;
	-o-transform-origin: 0 100%;

	transform-origin: 0 100%;
}
#heart:after { 
	left: 0; 
	-webkit-transform: rotate(45deg); 
	-moz-transform: rotate(45deg); 
	-ms-transform: rotate(45deg); 
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
	-webkit-transform-origin: 100% 100%;
	-moz-transform-origin: 100% 100%;
	-ms-transform-origin: 100% 100%;
	-o-transform-origin: 100% 100%;
	transform-origin :100% 100%;
}
К началу

Infinity

#infinity {
	position: relative; 
	width: 164px; 
	height: 80px; 
} 
#infinity:before, #infinity:after {
    content: ""; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 40px; 
    height: 40px; 
    border: 20px solid slategray; 
    -moz-border-radius: 50px 50px 0 50px; 
    border-radius: 50px 50px 0 50px; 
    -webkit-transform: rotate(-45deg); 
    -moz-transform: rotate(-45deg); 
    -ms-transform: rotate(-45deg); 
    -o-transform: rotate(-45deg); 
    transform: rotate(-45deg); 
} 
#infinity:after { 
	left: auto; 
	right: 0; 
	-moz-border-radius: 50px 50px 50px 0; 
	border-radius: 50px 50px 50px 0; 
	-webkit-transform: rotate(45deg); 
	-moz-transform: rotate(45deg); 
	-ms-transform: rotate(45deg); 
	-o-transform: rotate(45deg); 
	transform: rotate(45deg); 
}
К началу

curvedarrow

#curvedarrow { 
      position: relative; 
      width: 0; 
      height: 0; 
      border-top: 9px solid transparent; 
      border-right: 9px solid slategray; 
      -webkit-transform: rotate(10deg); 
      -moz-transform: rotate(10deg); 
      -ms-transform: rotate(10deg); 
      -o-transform: rotate(10deg); 
} 
#curvedarrow:after { 
      content: ""; 
      position: absolute; 
      border: 0 solid transparent; 
      border-top: 3px solid slategray; 
      border-radius: 20px 0 0 0; 
      top: -12px; left: -9px; 
      width: 12px; height: 12px; 
      -webkit-transform: rotate(45deg); 
      -moz-transform: rotate(45deg); 
      -ms-transform: rotate(45deg); 
      -o-transform: rotate(45deg); 
}