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

Question

[deeppines]

Вот блок из макета:
Вопрос в том как сделать такую обводку треугольника, и возможно ли это в принципе, средствами css?

Answer 1

[Dmitriy Konovalov]

Например вот так

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

Comments

[deeppines]

Благодарю, красивое решение.