L'article d'aujourd'hui a pour but de vous aider à résoudre un petit problème très gênant : celui de la réalisation de formes géométriques comme le carrée orienté (qui a subi une rotation), le cercle, le triangle ou encore le losange.

Ces formes peuvent être réalisées de trois façons différentes. La première consisterait à utiliser les images, méthode pas forcément optimisée qui peut rapidement alourdir une page; la deuxième à utiliser la balise <canvas>, spécialement prévue à cet effet, mais qui demande de nouvelles connaissances; et la troisième, celle que nous allons utiliser, à faire appel, tout simplement, à quelques propriétés CSS.

Le carré orienté

Le carré orienté est, en quelque sorte, un carré qui a subi une rotation. C'est la première forme que nous allons avoir. Attention, tout de même, à ne pas confondre ce carré qui a 4 angles droits, avec un losange qui n'en a pas. La ressemblance qui pourrait porter à confusion est la rotation.

Ainsi, pour faire ce carré, il vous faut prendre une div, lui donner une même hauteur et largeur et lui assigner une rotation, et ce grâce à la propriété CSS transform, qui prend en paramètre la valeur rotate et le nombre de degré de rotation. Pour mieux vous rendre compte, regardez le code et l'exemple suivant :

#carre {
    height: 30px;
    width: 30px;
    background: red;
    -ms-transform: rotate(45deg); /* Internet Explorer */
    -moz-transform: rotate(45deg); /* Firefox */
    -webkit-transform: rotate(45deg); /* Safari et Chrome */
    -o-transform: rotate(45deg); /* Opera */
}

Sachez que la propriété transform possède pleins d'applications, autre qu'assigner des rotations. Elle peut, en autre, étirer (attribut scale), déformer (attribut skew) ou encore déplacer (attribut translate) un objet.

Le triangle

Pour le triangle, le fonctionnement diffère de celui du carré orienté. La hauteur et la largeur n'entrent plus en jeu. Cette fois-ci, il faut jouer avec les bordures comme ceci :

#triangle {
    width: 0;
    height: 0;
    border-left: 18px solid transparent;
    border-right: 18px solid transparent;
    border-bottom: 30px solid blue;
}

Remarquez que la couleur du triangle n'est plus déterminée par la propriété background, mais par la couleur de la bordure qui correspond à la base du triangle, c'est à dire que si l'on veut un triangle avec une base à droite, il faudra remplacer border-bottom par border-left, border-left par border-top et border-right par border-bottom. Voici le code que vous devriez obtenir :

#triangle {
    width: 0;
    height: 0;
    border-top: 18px solid transparent;
    border-bottom: 18px solid transparent;
    border-left: 30px solid blue;
}

Le losange

Une fois que nous savons faire un triangle, il est maintenant facile de réaliser un losange à partir de deux triangles équilatéraux mis l'un au dessus de l'autre. Les propriétés seront alors inversées, c'est-à-dire qu'il vous faudra remplacer la propriété border-bottom du triangle inférieur par un border-top.

#triangle-1 {
    width: 0;
    height: 0;
    border-left: 18px solid transparent;
    border-right: 18px solid transparent;
    border-bottom: 30px solid purple;
}

#triangle-2 {
    width: 0;
    height: 0;
    border-left: 18px solid transparent;
    border-right: 18px solid transparent;
    border-top: 30px solid purple;
}

Notez qu'il est aussi possible de réaliser des losanges à partir d'une unique balise div en CSS, mais, cette fois-ci, il faut faire appel à des propriétés toutes autres, que nous verrons sûrement dans un prochain article.

Le cercle

A ce que l'on pourrait croire, le cercle est une forme très très simple à réaliser. Il suffit tout simplement d'assigner à votre balise div la forme d'un carré et de lui arrondir les bords de la moitié de la longueur d'un côté. Pour être plus clair, regardez le code CSS ci-dessous :

#cercle {
    width: 40px;
    height: 40px;
    border-radius: 20px;
    background: green;
}

Dans notre cas et dans tous les cas, la propriété border-radius a pour valeur la moitié de celle de width et de height.

L'ovale

Pour le ovale, le procédé est le même que pour le cercle, sauf que la valeur du border-radius prendra une valeur un peu particulière du type "border-radius: width ovale/height ovale+px". Pour mieux comprendre, voici un petit exemple :

#ovale {
    width: 60px;
    height: 40px;
    border-radius: 60px / 40px;
    background: orange;
}