Геометрические фигуры используя CSS

Очень часто при верстке сайтов возникает ситуация, когда нужно вставить какую-нибудь геометрическую фигуру.

Можно для этой задачи, просто вырезать картинку типа .png или .gif , но загрузка изображений влияет на скорость загрузки сайта (особенно, если таких изображений на сайте много). Что в свою очередь ни к чему хорошему не приведет, поэтому для этого я рекомендую использовать CSS код.

 

 

 

 

 

Прямоугольник


 

  1. #rectangle {
  2. background: orange; /* цвет заливки */
  3. width: 200px; /* ширина */
  4. height: 100px; /* высота */
  5. }

Круг


  1. #circle {
  2. background: orange /* цвет заливки */
  3. height: 100px; /* высота */
  4. width: 100px; /* ширина */
  5. border-radius: 50px; /* радиус скругления */
  6. -moz-border-radius: 50px; /* радиус скругления для mozila */
  7. }

 

Овал

 

 


  1. #oval {
  2. background: orange; /* цвет заливки */
  3. height: 100px; /* высота */
  4. width: 200px; /* ширина */
  5. border-radius: 100px / 50px; /* радиус скругления */
  6. -webkit-border-radius: 100px / 50px; /* радиус скругления для остальных */
  7. -moz-border-radius: 100px / 50px; /* радиус скругления для mozila */
  8. }

 

Треугольники:

 

 

  1. #triangle-up {
  2. height:0; /* высота */
  3. width: 0; /* ширина */
  4. border-right: 50px solid transparent; /* правая рамка*/
  5. border-bottom: 100px solid white; /* нижняя рамка*/
  6. border-left: 50px solid transparent; /* левая рамка*/
  7. }

 

  1. #triangle-down {
  2. height: 0; /* высота */
  3. width: 0; /* ширина */
  4. border-top: 100px solid orange; /* верхняя рамка*/
  5. border-right: 50px solid transparent; /* нижняя рамка*/
  6. border-left: 50px solid transparent; /* левая рамка*/
  7. }
  1. #triangle-left {
  2. height: 0; /* высота */
  3. width: 0; /* ширина */
  4. border-top: 50px solid transparent; /* верхняя рамка*/
  5. border-bottom: 50px solid transparent; /* нижняя рамка*/
  6. border-right: 100px solid orange; /* правая рамка*/
  7. }
  1. #triangle-right {
  2. height: 0; /* высота */
  3. width: 0; /* ширина */
  4. border-left: 100px solid orange; /* левая рамка*/
  5. border-top: 50px solid transparent; /* верхняя рамка*/
  6. border-bottom: 50px solid transparent; /* нижняя рамка*/
  7. }
  1. #triangle-topleft {
  2. height: 0; /* высота */
  3. width: 0; /* ширина */
  4. border-right: 100px solid transparent; /* правая рамка*/
  5. border-top: 100px solid orange; /* верхняя рамка*/
  6. }
  1. #triangle-topright {
  2. height: 0; /* высота */
  3. width: 0; /* ширина */
  4. border-left: 100px solid transparent;/* левая рамка*/
  5. border-top: 100px solid orange; /* верхняя рамка*/
  6. }

 

  1. #triangle-bottomleft {
  2. height: 0; /* высота */
  3. width: 0; /* ширина */
  4. border-right: 100px solid transparent; /* правая рамка*/
  5. border-bottom: 100px solid orange; /* нижняя рамка*/
  6.  
  7. }

 



  1. #triangle-bottomright {
  2. height: 0; /* высота */
  3. width: 0; /* ширина */
  4. border-left: 100px solid transparent; /* левая рамка*/
  5. border-bottom: 100px solid orange; /* нижняя рамка*/
  6. }

Примеры более сложных фигур можно посмотреть здесь.

Поделиться статьей в социальных сетях
Обязательно прочитайте:

К посту “Геометрические фигуры используя CSS” 2 комментариев:

  1. Ну а как вставлять то в статью?