/image%2F0011258%2F201307%2Fob_06c393213d1364cc674717ab41ca870b_01-7-13-004.jpg "Pour la forme.")
Le CSS permet des variations de forme de nos boïtes; en voici quelques exemples avec leur code.
Cadre de base rectangulaire.
<div style="width: 200px; height: 200px; background-color: #00cccc;">Cadre de base rectangulaire.</div>
Angles arrondis de 50px
<div style="width: 200px; height: 200px; background-image:url(http://fonds.toutimages.com/fo_orange/orange_002.jpg); border-radius: 50px;">Angles arrondis de 50px.</div>
Angles
arrondis
de 130px.
arrondis
de 130px.
<div style="width: 200px; height: 200px; background-color: #00cccc; border-radius: 130px; box-shadow: 4px 4px 8px black;">Angles arrondis de 130px.</div>
Angles arrondis
irréguliers.
irréguliers.
<div style="width: 200px; height: 200px; background-color: #00cccc; border-top-left-radius: 100px 50px; border-top-right-radius: 80px 50px; border-bottom-left-radius: 100px 100px;
box-shadow: -4px -4px 8px black;">Angles arrondis irréguliers.</div>
Angles
arrondis en ovale
sur cadre rectangulaire
et non carré.
arrondis en ovale
sur cadre rectangulaire
et non carré.
<div style="width: 220px; height: 100px; background-color: #00cccc; border-top-left-radius: 150px 80px; border-top-right-radius: 150px 80px; border-bottom-left-radius: 150px 80px;
border-bottom-right-radius: 150px 80px; box-shadow: 0px 0px 5px 5px grey;">cadre</div>
Le CSS permet aussi des variations de formes triangulaires; par contre, c'est sur la bordure que nous allons jouer et non sur le cadre lui-même.
Ainsi, en modifiant le largeur, la couleur et le style de la bordure, nous obtiendrons des résultats intéressants.
Deux sites qui m'ont éclairé sur le sujet:
http://jonrohan.me/guide/css/creating-triangles-in-css/
http://www.bellami.fr/triangles-css
Les lignes de codes ne seront plus à mettre en attribut mais en code CSS mais voyons plutôt !
L'intérêt semble limité car je ne sais pas comment remplir ces triangles par autre chose qu'une couleur !
Ainsi, en modifiant le largeur, la couleur et le style de la bordure, nous obtiendrons des résultats intéressants.
Deux sites qui m'ont éclairé sur le sujet:
http://jonrohan.me/guide/css/creating-triangles-in-css/
http://www.bellami.fr/triangles-css
Les lignes de codes ne seront plus à mettre en attribut mais en code CSS mais voyons plutôt !
L'intérêt semble limité car je ne sais pas comment remplir ces triangles par autre chose qu'une couleur !
<div class="tr1" style="width: 0px; height: 0px;"> </div>
<style><!--
.tr1 {
width:0px;
height:0px;
border-color:transparent transparent #cb0000;
border-style: solid;
border-width:0px 100px 100px 100px;
}
--></style>
<div class="tr2" style="width: 0px; height: 0px; box-shadow: 4px 4px 8px black;"> </div>
<style type="text/css"><!--
.tr2 {
border-color: red green blue orange;
border-style:solid;
border-width:50px;
width:0;
height:0;
}
--></style>
<div class="tr3" style="width: 0px; height: 0px;"> </div>
<style type="text/css"><!--
.tr3 {
border-color: red green blue orange;
border-style:dotted;
border-width:50px;
width:0;
height:0;
}
--></style>
<div class="tr4" style="width: 0px; height: 0px; box-shadow: -4px -4px 8px grey;"> </div>
<style type="text/css"><!--
.tr4 {
border-color: red green blue orange;
border-style:ridge;
border-width:50px;
width:0;
height:0;
}
--></style>
<div class="tr5" style="width: 0px; height: 0px; box-shadow: 4px 4px;"> </div>
<style type="text/css"><!--
.tr5 {
border-color: red green blue orange;
border-style:double;
border-width:50px;
width:0;
height:0;
}
--></style>