Добавить границу в треугольник, используя чистый CSS

Итак, я создал треугольник, который указывает на цвет фона # 222, используя чистый CSS. Я хочу добавить красную границу 1px к этому треугольнику, но я понятия не имею, как это сделать.

.arrow-tip {
    width: 0; height: 0; 
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 15px solid #222;
}
+3
источник поделиться
2 ответа

Единственный способ, которым вы могли бы сделать что-то подобное, - создать еще одну стрелку точно так же, как это, и поместить ее в первую, чтобы подделать границу следующим образом:

.arrow-tip {
    width: 0; 
    height: 0; 
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 15px solid #222;
    position: relative;
}

.arrow-tip:after {
    content: "";
    display: block;
    width: 0; 
    height: 0; 
    position: absolute;
    bottom: -16px;
    left: -17px;
    z-index: -1;
    border-left: 17px solid transparent;
    border-right: 17px solid transparent;
    border-bottom: 17px solid red;
}
<div class="arrow-tip"></div>

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

+2
источник

Вы можете использовать селектор sudo :before и :after для создания формы стрелки.

.arrow-tip { 
    position: relative;
    margin-top: 100px;
}
.arrow-tip:after,
.arrow-tip:before { 
    bottom: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
.arrow-tip:after { 
    border-color: rgba(0, 0, 0, 0);
    border-bottom-color: #222;
    border-width: 15px;
    margin-left: -15px;
}
.arrow-tip:before {
    bottom: -1px;
    border-color: rgba(0, 0, 0, 0);
    border-bottom-color: red;
    border-width: 17px;
    margin-left: -17px
}
<div class="arrow-tip"></div>

Пример JsFiddle: http://jsfiddle.net/tud0czmq/1/

+1
источник

Посмотрите другие вопросы по метке или Задайте вопрос