Как сделать чистый треугольник CSS с белым центром

Question

Я хочу создать стрелку, направленную вверх и вниз, с помощью css: http://apps.eky.hk/css-triangle-generator/

Однако вместо сплошного цвета я хочу настроить его так, чтобы внутренняя часть была белой, а вокруг треугольника была только граница. (Таким образом, треугольник будет разноцветным, одного цвета внутри и другой цветной рамкой).

Возможно ли это, и если да, то как это можно сделать?

Answer 1

Чтобы создать треугольники только с CSS, мы используем элемент нулевой ширины / высоты с границами:

.arrow-up {
    width  : 0;
    height : 0;

    border-left   : 50px solid transparent;
    border-right  : 50px solid transparent;
    border-bottom : 50px solid black;
}

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

HTML -

<div class="top"></div>
<div class="bottom"></div>​

CSS -

.top {
    position : absolute;
    top      : 6px;
    left     : 10px;
    width    : 0;
    height   : 0;
    z-index  : 100;

    border-left   : 50px solid transparent;
    border-right  : 50px solid transparent;
    border-bottom : 50px solid black;
}
.bottom {
    position : absolute;
    width    : 0;
    height   : 0;
    z-index  : 99;

    border-left   : 60px solid transparent;
    border-right  : 60px solid transparent;
    border-bottom : 60px solid red;
}​

Вот демонстрация: http://jsfiddle.net/jasper/qnmpb/1/

Обновление

Затем вы можете поместить оба треугольных элемента DIV в контейнер и переместить этот контейнер так, как вам нужно:

HTML --

<div id="container">
    <div class="top"></div>
    <div class="bottom"></div>
</div>

CSS -

#container {
    position : relative;
    top      : 25px;
    left     : 25px;
}

Вот демонстрационная версия: http://jsfiddle.net/jasper/qnmpb/3/

РЕДАКТИРОВАТЬ (2014):

Я простовернулся к этому ответу и заметил, что отдельные элементы HTML не нужны для создания вашего двойного треугольника.Вы можете использовать псевдоэлементы, :before и :after.Т.е. замените селектор .top на что-то вроде .my-element-that-needs-a-triangle:before, а селектор .bottom на что-то вроде .my-element-that-needs-a-triangle:after.

Answer 2

Я думаю, что вы могли бы получить хорошее представление о том, что делать, проверив этот урок о чистых пузырях мысли CSS.Он делает то, что вы ищете.

http://www.sitepoint.com/pure-css3-speech-bubbles/

Answer 3

Если вы хотите создать треугольник с границами (или похожими на тени) в чистом CSS, вы должны использовать псевдоэлементы :before и :after.

В моем примере я добавил display:inline-block; к элементу .arrow-dropdown, чтобы иметь возможность создать какое-то выпадающее меню с тенью. За ним следует .arrow-only, который представляет собой базовый треугольник с красной рамкой.

body {
    margin: 10px;
    background: #1670c4;
}
.text {
    display: inline-block;
    font-size: 15px;
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.4);
    cursor: default;
}
.arrow-dropdown {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    margin: 1px 0 0 8px;
    width: 8px;
    height: 7px;
}
.arrow-dropdown:after {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 7px 4px 0;
    border-color: #fff transparent transparent transparent;
    display: block;
    width: 0;
    z-index: 1;
}
.arrow-dropdown:before {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 8px 5px 0;
    border-color: rgba(0,0,0,0.3) transparent transparent transparent;
    display: block;
    width: 0;
    z-index: 0;
}
.arrow-only {
    position: relative;
    vertical-align: middle;
    margin: 10px 0 0 8px;
    width: 8px;
    height: 7px;
}
.arrow-only:after {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 12px 9px 0;
    border-color: #fff transparent transparent transparent;
    display: block;
    width: 0;
    z-index: 1;
}
.arrow-only:before {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 15px 11px 0;
    border-color: #f00 transparent transparent transparent;
    display: block;
    width: 0;
    z-index: 0;
    margin:-1px 0 0 -2px;
}

<div class="text">
  Dropdown text
</div><div class="arrow-dropdown"></div>

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

Answer 4

В зависимости от того, как вы его используете, вы можете создать треугольник с рамкой и даже тенью от блока без использования границы треугольника, используя CSS transform: rotate(). Смотрите мой ответ здесь: https://stackoverflow.com/a/8867645/918414