F - cool symbol CSS

by Ivan Gerasimenko

HTML

<div class="triangle-diagonal-dl margin-10"></div>
<div class="cross margin-10"></div>
<div class="corner margin-10"></div>

CSS

.margin-10 {
    margin: 10px;
}

.triangle-diagonal-dl {
    width: 0px;
    height: 0px;
    border-bottom: 25px solid green;
    border-right: 50px solid transparent;
}
/* CROSS */
.cross {
    width: 50px;
    height: 10px;
    background: green;
}
.cross:before {
    content: "";
    display: block;
    width: 10px;
    height: 50px;
    background: green;
}

/* CORNER */
.corner {
    width: 50px;
    height: 10px;
    background: green;
}
.corner:before {
    content: "";
    display: block;
    width: 10px;
    height: 50px;
    background: green;
}