Рисуем треугольники

Если для дизайна страницы требуются простые треугольники, то необязательно использовать графические файлы. Можно воспользоваться средствами CSS для создания различных треугольников. Несколько примеров приведены ниже.

Примеры

Как это работает

Когда браузер отрисовывает границы, то делает это особым образом, закрашивая области под углом. Можно воспользоваться этим обстоятельством. Одну сторону границы закрасим в цвет будущего треугольника, а остальные сделаем прозрачными. Затем установим ширину границы, присвоив ему какое-нибудь значение, например, 20 пикселей. А ширину и высоту фигуры сделаем равным 0.

Интересный пример получается, если раскрасить все четыре стороны границы в свой цвет.

.arrow-multicolor {
    border-color: red green blue orange;
    border-style:solid;
    border-width:50px;
    width:0;
    height:0;
}

<div class="arrow-multicolor"></div>

Как видите, получаются четыре разноцветных треугольника, образующих квадрат. Если чуть-чуть поиграться с параметрами, то можно получить треугольники разных форм.

.arrow-acute {
    border-color: red green blue orange;
    border-style:solid;
    border-width:25px 10px 15px 30px;
    width:0;
    height:0;
}

А если теперь оставить только один цвет, то получится треугольник. Перепишем код по другому, указав каждый цвет отдельным свойством.

.arrow {
  width: 0; height: 0;
  border: 50px solid;
  border-top-color: red;
  border-right-color: green;
  border-bottom-color: blue;
  border-left-color: orange;
}

Левую часть укажем прозрачной.

.arrow {
  width: 0; height: 0;
  border: 50px solid;
  border-top-color: red;
  border-right-color: green;
  border-bottom-color: blue;
  border-left-color: transparent;
}

Если сделать прозрачными три стороны, то останется один треугольник в нужном направлении.

.arrow {
    width: 0; height: 0;
    border: 100px solid;
    border-color: transparent;
    border-bottom-color: blue;
}

Также вы можете попробовать использовать различные стили, но следует быть осторожным и тестировать в разных браузерах.

border-style:ridge;

border-style:groove;

border-style:double;

Speech bubble

Технику создания треугольников можно использовать для создания красивых окошек, как в комиксах. Рисуются две фигуры и накладываются друг на друга в нужном месте:

Это окошко создано без использования картинок!

<div class="chat-bubble">
    Привет! Как дела?
    <div class="chat-bubble-arrow-border"></div>
    <div class="chat-bubble-arrow"></div>
</div>

.chat-bubble {
    background-color:#EDEDED;
    border:2px solid #666666;
    font-size:35px;
    line-height:1.3em;
    margin:10px auto;
    padding:10px;
    position:relative;
    text-align:center;
    width:300px;
    border-radius:10px;
    box-shadow:0 0 5px #888888;
}

.chat-bubble-arrow-border {
    border-color: #666666 transparent transparent transparent;
    border-style: solid;
    border-width: 10px;
    height:0;
    width:0;
    position:absolute;
    bottom:-22px;
    left:30px;
}

.chat-bubble-arrow {
    border-color: #EDEDED transparent transparent transparent;
    border-style: solid;
    border-width: 10px;
    height:0;
    width:0;
    position:absolute;
    bottom:-19px;
    left:30px;
}

Другой универсальный вариант

Базовая разметка:

<div class="speech-bubble">Hello Kitty</div>

Стиль

.speech-bubble {
    position: relative;
    background-color: #e3e3e3;
    width: 200px;
    height: 150px;
    line-height: 150px; /* vertically center */
    color: white;
    text-align: center;
}

Результат

Теперь нарисуем стрелку-треугольник в нужном месте. Для начала цветной квадратик:

.speech-bubble:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border: 10px solid;
  border-color: red green blue yellow;
}

Оставляем только четверть квадратика:

.speech-bubble:after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border: 10px solid;
    border-top-color: red;
}

Теперь перемещаем ниже и закрашиваем. Закругляем углы у сообщения:

.speech-bubble {
   /* … other styles */
   border-radius: 10px;
}
.speech-bubble:after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border: 10px solid;
    border-top-color: #292929;
    top: 100%;
    left: 50%;
    margin-left: -15px; /* adjust for border width */
}

Поняв принцип, можно размещать треугольник с любой стороны.

/*
   Укажите класс .speech-bubble и .speech-bubble-DIRECTION
   
Hello Kitty
*/
 
.speech-bubble {
  position: relative;
  background-color: #292929;
  width: 200px;
  height: 150px;
  line-height: 150px; /* vertically center */
  color: white;
  text-align: center;
  border-radius: 10px;
  font-family: sans-serif;
}
 
.speech-bubble:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border: 15px solid;
}
 
/* Position the Arrow */
 
.speech-bubble-top:after {
  border-bottom-color: #292929;
 
  left: 50%;
  bottom: 100%;
  margin-left: -15px;
}
.speech-bubble-right:after {
  border-left-color: #292929;
 
  left: 100%;
  top: 50%;
  margin-top: -15px;
}
 
.speech-bubble-bottom:after {
  border-top-color: #292929;
 
  top: 100%;
  left: 50%;
  margin-left: -15px;
}
 
.speech-bubble-left:after {
  border-right-color: #292929;
  top: 50%;
  right: 100%;
  margin-top: -15px;
}

При использовании line-height при вертикальном центрировании мы получаем ограничение текста одной строкой. Для решения этой проблемы, можно применить display: table к нашему Speech Bubble и display: table-cell к тексту:

.speech-bubble {
    /* other styles */
    display: table;
}
.speech-bubble p {
    display: table-cell;
    vertical-align: middle;
}

Дополнительные материалы

CSS Triangle | CSS-Tricks

Реклама