CSS triangles

by dcardoso

HTML

<div class="line">
    <div class="esquerda"></div>
    <div class="direita"></div>      
</div>

CSS

.line {
    width: 20px;
    height: 20px;
}              

.line div {
    
    border-style: solid;
}

.esquerda {
    /*float: left;*/
    border-width: 20px 0px 0px 20px;
    border-top-color: green;
    border-left-color: transparent;
}

.direita {
    left: 20px;
    /*float: left;*/
    border-width: 0 20px 20px 0;
    border-bottom-color: red;
    border-left-color: transparent;
    border-right-color: transparent;
}