Help CSS

Par pobourger, il y a 11 ans

Les bases HTML/CSS

Bonjour,
Quelqu'un à une idée de comment dois-je m'y prendre pour réalisé ceci en CSS/HTML ? (Le tout)

Merci beaucoup
Cordialement
Paul-Olivier

4 réponses

jo-jo-123, il y a 11 ans

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, il y a 11 ans

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

jo-jo-123, il y a 11 ans

Oui, elle le sera

pobourger, il y a 11 ans

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