Curiosidades con CSS

Un cuadrado, dividido en cuatro partes		<div style="border-bottom: 50px solid lightblue; border-left: 50px solid red; border-right: 50px solid green; border-top: 50px solid yellow; height: 0;width: 0;"> </div>
Un triángulo.		<div style="border-bottom: 50px solid yellow; border-left: 30px solid #101921; border-right: 30px solid #101921; margin-bottom: 30px; width: 0;"> </div>
Un moño		<div style="border: 30px solid salmon; border-bottom: 15px solid #101921; border-top: 15px solid #101921; height: 0; width: 0;"> </div>

Una flecha.
Hacia allá	<style> .right_arrow {position: relative; height: 50px; width: 250px;} .right_arrow .body {background-color: SteelBlue; color:#FFF; line-height: 50px; text-align: center; height: 50px; width:100px;} .right_arrow .arrow {border: 25px solid #101921; border-left: 10px solid SteelBlue; position:absolute; left:100px; top: 0; height: 0;} </style> <div class="right_arrow"><div class="body"> ... texto ... </div><div class="arrow"></div></div>
Y otra flecha.
Hacia el otro lado	<style> .left_arrow {position: relative;} .left_arrow .arrow {border: 25px solid #101921; border-right: 25px solid #CC0000; margin-left: -25px; overflow: hidden; width:0; height:0;} .left_arrow .body {background-color: #CC0000; color: white; margin: -35px 0 0 25px; left:25px; text-align: center; top:15px; height:20px;} </style> <div class="left_arrow"><div class="arrow"></div><div class="body"> ... texto ... </div></div>

REFERENCIAS:Cult-f.net