LucasKane
@LucasKane
Front-end Developer

Как реализовать треугольник с border: dashed у div блока?

Вот блок из макета: c92ebd5584b84231aa8cb84a4e8f6352.png
Вопрос в том как сделать такую обводку треугольника, и возможно ли это в принципе, средствами css?
  • Вопрос задан
  • 5036 просмотров
Решения вопроса 1
Sprime
@Sprime
HTML-верстальщик
Например вот так

HTML:
<div class="block">
    some text
    <span class="triangle"></span>
</div>

CSS:
.block {
    width: 400px;
    padding: 10px;
    background: #fff;
    min-height: 100px;
    position: relative;
    border: 1px dashed #aaa;
    margin: 10px 10px 10px 40px;
}
.block span.triangle {
    width: 0;
    height: 0;
    display: block;
    position: absolute;
    top: 30px; left: -30px;
    border-bottom: 30px solid #fff; 
    border-left: 30px solid transparent;			
}
.block span.triangle:before {
    content: '';
    width: 40px;
    display: block;
    position: absolute;
    top: 15px; left: -35px;
    border-top: 1px dashed #aaa;
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
}
.block span.triangle:after {
    content: '';
    width: 30px;
    display: block;
    position: absolute;
    top: 30px; left: -30px;
    border-top: 1px dashed #aaa;
}

jsfiddle.net
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы