Опубликовал KamaZ 26.04.2024 в раздел: Общие уроки | 0 комментов


Как вы думаете, можно ли с помощью пары тегов и чистого CSS сделать масштабируемый треугольник? А пятиугольник? А вот такую звезду? Думаю, многие считают, что нет. На самом деле можно.

Так вот, сегодня у нас пост-эксперимент. Мы будет играть с известным всем свойством CSS — border (и все, которые к нему относятся). В ходе эксперимента мы посмотрим, как сделать несколько простых многоугольников, звезду и рассмотрим один случай, где на практике можно использовать эти техники.

Простые геометрические фигуры

Итак, начнем с простых примеров. Знаете, как нарисовать треугольник только средствами HTML и CSS? А вот так:

HTML

Code

<div class="eg">
  <a class="polygon r3">
  <b class="trapezoid aa"></b>
  </a>
</div>

CSS

Code

.trapezoid { vertical-align: text-bottom; }  

.trapezoid,
.polygon { display: -moz-inline-block; }

.polygon,
.trapezoid { margin:0; padding: 0; background: none; }

.polygon { width: 10em; height: 10em; border: none; display: inline-block; text-align: center; }
.trapezoid {
  display: inline-block; width: 1px; height: 0; margin: 0 auto;  
  border-left: 5em solid transparent; border-right: 5em solid transparent;
}

.polygon .aa { border-bottom: 10em solid; border-top: none; }

.polygon.r2 { height: 0em; }
   
.polygon.r3 { height: 8.66em; }
.polygon.r3 .trapezoid { border-width: 8.66em 5em; }
   
div.eg { width: 10em; background: #FFF; margin: 0 0; padding: 1em; }
div.eg .polygon { display: block; margin: 0 auto; }
   
.r3 { color: red; font-size: 0.5em; }

Разместил на сайте ещё несколько фигур и кодов к ним. Посмотреть здесь

0 Комментариев