linear-gradient based triangle

by Zhe Qian

HTML

<div class="triangle triangle-right-angled-isosceles"></div>
<div class="triangle triangle-not-right-angled"></div>
<div class="triangle triangle-regular"></div>
<div class="triangle triangle-not-bottom-up"></div>

CSS

.triangle {
    float: left;
    clear: both;
    margin-bottom: 30px;
    width: 100px;
    height: 100px;
}

.triangle-right-angled-isosceles {
    background: linear-gradient(45deg, transparent 50%, #fff 50%), 
			linear-gradient(-45deg, transparent 50%, #fff 50%), 
			linear-gradient(to bottom, #00f, #00f);
}

.triangle-not-right-angled {
    background: linear-gradient(60deg, transparent 63%, #fff 63%), 
			linear-gradient(-60deg, transparent 63%, #fff 63%), 
			linear-gradient(to bottom, #0f0, #0f0);
}

.triangle-regular {
    background: linear-gradient(40deg, transparent 46%, #fff 46%), 
			linear-gradient(-70deg, transparent 73%, #fff 73%), 
			linear-gradient(to bottom, #f00, #f00);
}


.triangle-not-bottom-up {
    background: linear-gradient(40deg, transparent 46%, #fff 46%), 
			linear-gradient(-85deg, transparent 88%, #fff 73%), 
			linear-gradient(-10deg, #fff 16%, transparent 16%), 
			linear-gradient(to bottom, #000, #000);
}