Вёрстка: Треугольник стрелка с помощью CSS
Треугольник создаётся стилями для одного элемента или псевдоэлемента DOM. Приём заключается в создании блока с нулевыми размерами и границами. Соседние границы нужно сделать прозрачными, а противоположную нужному направлению стрелки (вершины треугольника) окрасить в нужный цвет.
<div> <span class="triangle triangle-up"></span> <span class="triangle triangle-down"></span> <span class="triangle triangle-left"></span> <span class="triangle triangle-right"></span> </div> <div class="triangleWrapper"></div>
.triangle{ width: 0; height: 0; display:inline-block; border:none; } .triangle-up { border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #d70000; } .triangle-down { border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid #d70000; } .triangle-right { border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 10px solid #d70000; } .triangle-left { border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right:10px solid #d70000; } .triangleWrapper::after{ content:' '; width: 0; height: 0; display:block; border:none; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #d70000; }
Комментарии