Hoe maak je schuine randen met borders in CSS
.//. Met CSS is het mogelijk om schuine randen te simuleren. Dit kan via het gebruik van borders. Zie het volgende plaatjes als voorbeeld:
De stappen: .//. De code is als volgt:
- Ten eerste is een DIV vereist.
- Ten twee is een CSS style sheet vereist, waarbij twee border een eigen kleur krijgen toebedeeld.
- Dat is alles! Bij het gebruik van ondergaande code kan het resultaat van het plaatje hierboven worden verwacht!
<div class="box"><h1>Diagonal Lines in CSS</h1></div> <p><style> .box { width:150px; text-align:right;/*move the text to the right*/ } </p><p>.box h1 { border-left:10px solid #fff; /*same as page colour*/ border-bottom:10px solid #000; /*black, bottom, border*/ font-size:18px; color:#000; /*black text*/} </style> </p>
.//.
.//.http://fourshapes.com/articles/2006/07/11/diagonal-lines-in-css/