equilateral triangle

HTML

<div class="kwadrat">
</div>
<div class='triangle'>
    <div></div>
</div>

SCSS

.triangle {

    width : 40px;
    height : 40px;
    overflow : hidden;
    transform-origin : left bottom;
    transform : rotate(30deg);
    > div {
        height : 100%;
        transform-origin : left top;
        transform : rotate(10deg);
        overflow : hidden;
        &:before {
            content :'';
            background : blue;
            display : block;
            height : 100%;
            transform-origin : right top;
            transform : rotate(0deg);
        }
    }
}