Редактировать

Диагональные элементы дизайна при помощи CSS

Задача

Сверстать треугольник.

Решение 1. Применение border.

Диагональ создается за счет окрашивания границ в одинаковые цвета

  • Не прозрачные треугольники

    .triangle {
    width: 0;
    height: 0;
    border-top: 50px solid #af0000;
    border-right: 50px solid #00af00;
    border-bottom: 50px solid #0000af;
    border-left: 50px solid #af00af;
}

  • Прозрачные треугольники

    .triangle {
    width: 0;
    height: 0;
    border-top: 50px solid rgba(150, 0, 0, 0.8);
    border-right: 50px solid rgba(0, 150, 0, 0.8);
    border-bottom: 50px solid rgba(0, 0, 150, 0.8);
    border-left: 50px solid rgba(150, 0, 150, 0.8);
}

Плюсы:

  • Можно верстать не только треугольники, но и более сложные фигуры

  • Хорошая поддержка в браузерах

Минусы:

  • фиксированная высота и ширина, что не подойдет для блоков с изменяющимся текстом

Решение 2. Применение linear-gradient.

  • Прозрачные треугольники НИЗ-ВЕРХ

    .triangle {
    height: 100px;
    width: 100px;
    background: linear-gradient(to bottom right, rgba(150, 0, 0, 0.8) 0%, rgba(150, 0, 0, 0.8) 50%, rgba(0, 150, 0, 0.8) 50%, rgba(0, 150, 0, 0.8) 100%);
}

  • Прозрачные треугольники ВЕРХ-НИЗ

    .triangle {
    height: 100px;
    width: 100px;
    background: linear-gradient(to top right, rgba(150, 0, 0, 0.8) 0%, rgba(150, 0, 0, 0.8) 50%, rgba(0, 150, 0, 0.8) 50%, rgba(0, 150, 0, 0.8) 100%);
}

Плюсы:

  • Можно выставить высоту родителя и применять к блокам с изменяющимися размерами.

Решение 3. SVG

  <svg version="1.1" 
   xmlns="http://www.w3.org/2000/svg" 
   xmlns:xlink="http://www.w3.org/1999/xlink" 
   x="0px" 
   y="0px" 
   viewBox="0 0 100 100" 
   style="width:100px; height:100px;" 
   xml:space="preserve">

   <style type="text/css">
      .poligon-top{fill:rgba(0, 150, 0, 0.8);}
      .poligon-bottom{fill:rgba(150, 0, 0, 0.8);}
   </style>
   <polygon class="poligon-top" points="100,0 0,0 100,100 100,100"></polygon>
   <polygon class="poligon-bottom" points="0,0 100,100 0,100 0,0"></polygon>
  </svg>