Forum : Help CSS

Réponse acceptée

Voici un exemple de ce que tu peux faire
Mais je pense qu'il existe des meilleurs façons que la mienne pour le faire

Ce code fonctionne que sur les navigateurs supportant le CSS3

Fichier html

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="line_a">
            <div class="element"></div>
            <div class="element"></div>
            <div class="element"></div>
            <div class="element"></div>
            <br>
            <div class="element"></div>
            <div class="element"></div>
            <div class="element"></div>
            <div class="element"></div>
        </div>
        <div class="line_b">
            <div class="element"></div>
            <div class="element"></div>
            <div class="element"></div>
        </div>
    </div>
</body>
</html>

Fichier CSS

.container
{
    position: relative;
    width: 900px;
    height: 400px;
    margin: auto;
}
.line_b
{
    position: absolute;
    top: 82px;
    left: 82px;
}

.element
{
    display: inline-block;
    width: 110px;
    height: 110px;
    border: 2px solid #e6e6e6;
    margin: 23px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

pobourger

Auteur

Si je met une icône, elle seras tournée de 45° non ?
En tout cas merci !!

jo-jo-123

Oui, elle le sera

pobourger

Auteur

Pour avoir l'icone droite je peut faire un :

.element span {
    display: inline-block;
        -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

PS : Merci jojo pour ton code

Help CSS

4 réponses