Как сделать треугольники на CSS

Жалко выбрасывать стиль :) Сделать треугольники можно, например, с помощью свойств группы border, при этом сплошные треугольники получаются куда легче, чем треугольники-рамки - в последнем случае нам потребуются ещё расстояния и абсолютное позиционирование. Вот не слишком хорошо подогнанный стиль для восьми заполненных цветом и восьми "полых" (залитых фоновым цветом, у нас - белым) треугольников:

Исходный текст этой разметки:

<style>
 .triangle {
  display: inline-block;
 }
 /* Сплошные треугольники */
 .upward { /* Направленный вверх */
  border: 20px solid transparent;
  border-bottom: 20px solid #080;
 }
 .downward { /* Направленный вниз */
  border: 20px solid transparent; 
  border-top: 20px solid #080;
 }
 .leftward { /* Направленный влево */
  border: 20px solid transparent; 
  border-right: 20px solid #080;
 }
 .rightward { /* Направленный вправо */
  border: 20px solid transparent;
  border-left: 20px solid #080;
 }
 .topleftcorner { /* Верхний левый угол */
  border-top: 20px solid #080;
  border-right: 20px solid transparent;
 }
 .upperrightcorner { /* Верхний правый угол */
  border-top: 20px solid #080;
  border-left: 20px solid transparent;
 }
 .lowerrightcorner { /* Нижний правый угол */
  border-bottom: 20px solid #080;
  border-left: 20px solid transparent;
 }
 .bottomleftcorner { /* Нижний левый угол */
  border-bottom: 20px solid #080;
  border-right: 20px solid transparent;
 }
 /* Полые треугольники */ 
 .hollow {
  position: relative;
 }
 .upward-hollow { /* Направленный вверх */
  border: 20px solid transparent;
  border-bottom: 20px solid #080;
 }
 .upward-hollow:after {
  content: '';
  position: absolute;
  top: -14px;
  left: -16px;
  border: 16px solid transparent;
  border-bottom: 16px solid #fff;
 }
 .downward-hollow { /* Направленный вниз */
  border: 20px solid transparent;
  border-top: 20px solid #080;
 }
 .downward-hollow:after {
  content: '';
  position: absolute;
  top: -18px;
  left: -16px;
  border: 16px solid transparent;
  border-top: 16px solid #fff;
 }
 .leftward-hollow { /* Направленный влево */
  border: 20px solid transparent;
  border-right: 20px solid #080;
 }
 .leftward-hollow:after {
  content: '';
  position: absolute;
  top: -16px;
  left: -14px;
  border: 16px solid transparent;
  border-right: 16px solid #fff; 
 }
 .rightward-hollow { /* Направленный вправо */
  border: 20px solid transparent;
  border-left: 20px solid #080;
 }
 .rightward-hollow:after {
  content: '';
  position: absolute;
  top: -17px;
  left: -18px;
  border: 17px solid transparent;
  border-left: 16px solid #fff; 
 }
 .topleftcorner-hollow { /* Верхний левый угол */ 
  border-top: 20px solid #080;
  border-right: 20px solid transparent;
 }
 .topleftcorner-hollow:after { 
  content: '';
  position: absolute;
  top: -19px;
  left: 1px;
  border-top: 16px solid #fff;
  border-right: 17px solid transparent;  
 }
 .upperrightcorner-hollow { /* Верхний правый угол */
  border-top: 20px solid #080;
  border-left: 20px solid transparent;
 }
 .upperrightcorner-hollow:after {
  content: '';
  position: absolute;
  top: -19px;
  left: -17px;
  border-top: 17px solid #fff;
  border-left: 16px solid transparent;
 }
 .lowerrightcorner-hollow { /* Нижний правый угол */
  border-bottom: 20px solid #080;
  border-left: 20px solid transparent;
 }
 .lowerrightcorner-hollow:after {
  content: '';
  position: absolute;
  top: 2px;
  left: -17px;
  border-bottom: 17px solid #fff;
  border-left: 16px solid transparent; 
 }
 .bottomleftcorner-hollow {/* Нижний левый угол */
  border-bottom: 20px solid #080;
  border-right: 20px solid transparent;
 }
 .bottomleftcorner-hollow:after {
  content: '';
  position: absolute;
  top: 2px;
  left: 1px;
  border-bottom: 17px solid #fff;
  border-right: 17px solid transparent; 
 }
</style>
<span class="triangle upward"></span>
<span class="triangle downward"></span>
<span class="triangle leftward"></span>
<span class="triangle rightward"></span>
<span class="triangle topleftcorner"></span>
<span class="triangle upperrightcorner"></span>
<span class="triangle lowerrightcorner"></span>
<span class="triangle bottomleftcorner"></span>
<span class="triangle hollow upward-hollow"></span>
<span class="triangle hollow downward-hollow"></span>
<span class="triangle hollow leftward-hollow"></span>
<span class="triangle hollow rightward-hollow"></span>
<span class="triangle hollow topleftcorner-hollow"></span>
<span class="triangle hollow upperrightcorner-hollow"></span>
<span class="triangle hollow lowerrightcorner-hollow"></span>
<span class="triangle hollow bottomleftcorner-hollow"></span>

Помещая в элементы span текстовое содержимое, можно добиваться разных странных эффектов, например: текст превед

<span class="triangle upward">текст</span>
<span class="triangle leftward">превед</span>

...но не факт, что этим стоит злоупотреблять. Обычно всё-таки текст помещается между парными стилевыми элементами, без дополнительных разрывов строк:

окей

<p>
 <span class="triangle lowerrightcorner"></span> окей <span class="triangle bottomleftcorner"></span>
</p>

27.09.2022, 21:38 [282 просмотра]