Советы и приёмы: как сделать треугольник (кнопку «play») в CSS

Если посмотреть на миниатюру заметки, можно увидеть какой-то видео-ролик, который можно стартовать, нажав на «play». Это довольно частый элемент на сайтах, где размещаются видео-материалы. Сделать его можно, использовав картинку png с прозрачным фоном. Ну и наложить её на фото из ролика — а ля «preview».

Попробуем сделать это так и сделать без картинки play.

Сделаем превью для видео, используя кадр + картинку «play»:

<div class="video">
  <img class="video__img" src="/media/uploads/2017/08/28/moinerobot2217-1920x1080.jpg">
  <img class="video__play-icon" src="/media/uploads/2017/08/30/play.png">
</div>

<style>
.video {
  /* чтобы можно было внутри всё разместить через absolute */
  position: relative;
 
  width: 825px;
  height: 510px;
}

.video__img {
  position: absolute;
  top: 0;
  left: 0;
}

.video__play-icon {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}
</style>

Выглядеть это будет примерно так:

Второй вариант интереснее — мы не будем использовать картинку значка play, а нарисуем его через CSS:

<div class="video">
  <img class="video__img" src="/media/uploads/2017/08/28/moinerobot2217-1920x1080.jpg">
  <div class="video__play-icon">
    <div class="video__play-triangle"></div>
  </div>
</div>

<style>
.video {
  /* чтобы можно было внутри всё разместить через absolute */
  position: relative;

  width: 825px;
  height: 510px;
}

.video__img {
  position: absolute;
  top: 0;
  left: 0;
}

.video__play-icon {
  height: 44px;
  width: 44px;
  padding: 32px;
  border-radius: 50%;
  border: 3px solid #fff;
  background: rgba(0, 0, 0, 0.8);

  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

.video__play-triangle {
  width: 0;
  height: 0;
  margin-left: 8px;
  border-style: solid;
  border-width: 22px 0 22px 37px;
  border-color: transparent transparent transparent #ffffff;
}
</style>

Вся «магия» происходит в правилах border для класса .video__play-triangle.

Само свойство border не подразумевает создание треугольника, но если задать нулевую ширину и высоту элемента, а также установить толстую границу, то мы увидим набор из четырёх треугольников:

 <div style="
  width: 0;
  height: 0;
  border: 100px solid transparent;
  border-color: #c0c #cc0 #000 #0cc;
">
</div>

В свойстве border-color цвета бордюров указываются по кругу, по часовой стрелке: сверху, справа, снизу, слева.

Соответственно, чтобы оставить только треугольник, нужно 3 стороны покрасить «прозрачным», а четвёртую обычным цветом:

 <div style="
  width: 0;
  height: 0;
  border: 100px solid transparent;
  border-color: transparent transparent transparent #0cc;
">
</div>

В свойстве border-width задаётся ширина границ также по кругу, по часовой стрелке. За счёт этого можно «вытянуть» треугольник:

 <div style="
  width: 0;
  height: 0;
  border: solid;
  border-color: transparent transparent transparent #0cc;
  border-width: 100px 100px 100px 170px;
">
</div>

На этом всё, добро пожаловать в треугльнико-строение!