CSS => Formes à un seul élément

Carré

Pour créer un carré, définissez un élément avec une largeur et une hauteur. Dans l'exemple ci-dessous, nous avons un élément avec une width et une height de 100 pixels chacune.

<div class="square"></div>

.square {
    width: 100px;
    height: 100px;
    background: rgb(246, 156, 85);
}

Triangles

Pour créer un triangle CSS, définissez un élément avec une largeur et une hauteur de 0 pixel. La forme de triangle sera formée en utilisant les propriétés de bordure. Pour un élément avec 0 hauteur et largeur, les 4 bordures (haut, droite, bas, gauche) forment chacune un triangle. Voici un élément avec 0 hauteur / largeur et 4 bordures de couleur différentes.

En définissant des bordures sur transparentes et d'autres sur une couleur, nous pouvons créer divers triangles. Par exemple, dans le triangle Haut, nous définissons la bordure inférieure sur la couleur souhaitée, puis définissons les bordures gauche et droite sur transparentes. Voici une image avec les bords gauche et droit légèrement ombrés pour montrer comment le triangle se forme.

Les dimensions du triangle peuvent être modifiées en modifiant les différentes largeurs de bordure - plus grandes, plus courtes, asymétriques, etc. Les exemples ci-dessous montrent tous un triangle de 50x50 pixels.

Triangle - Pointage vers le haut

<div class="triangle-up"></div>

.triangle-up {
  width: 0;
  height: 0;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-bottom: 50px solid rgb(246, 156, 85);
}

Triangle - Pointage vers le bas

<div class="triangle-down"></div>

.triangle-down {
  width: 0;
  height: 0;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-top: 50px solid rgb(246, 156, 85);
}

Triangle - Pointage à droite

<div class="triangle-right"></div>

.triangle-right {
  width: 0;
  height: 0;
  border-top: 25px solid transparent;
  border-bottom: 25px solid transparent;
  border-left: 50px solid rgb(246, 156, 85);
}

Triangle - Pointant Gauche

<div class="triangle-left"></div>

.triangle-left {
  width: 0;
  height: 0;
  border-top: 25px solid transparent;
  border-bottom: 25px solid transparent;
  border-right: 50px solid rgb(246, 156, 85);
}

Triangle - Pointage vers le haut / droite

<div class="triangle-up-right"></div>

.triangle-up-right {
  width: 0;
  height: 0;
  border-top: 50px solid rgb(246, 156, 85);
  border-left: 50px solid transparent;
}

Triangle - Pointage vers le haut / gauche

<div class="triangle-up-left"></div>

.triangle-up-left {
  width: 0;
  height: 0;
  border-top: 50px solid rgb(246, 156, 85);
  border-right: 50px solid transparent;
}

Triangle - Pointage vers le bas / droite

<div class="triangle-down-right"></div>

.triangle-down-right {
  width: 0;
  height: 0;
  border-bottom: 50px solid rgb(246, 156, 85);
  border-left: 50px solid transparent;
}

Triangle - Pointage vers le bas / gauche

<div class="triangle-down-left"></div>

.triangle-down-left {
  width: 0;
  height: 0;
  border-bottom: 50px solid rgb(246, 156, 85);
  border-right: 50px solid transparent;
}

Éclats

Une rafale est similaire à une étoile mais les points s'étendent moins loin du corps. Pensez à une forme de rafale comme à un carré avec des carrés supplémentaires légèrement rotatifs superposés.

Les places supplémentaires créées par la méthode ::before et ::after Psuedo-éléments.

8 Point Burst

Une rafale de 8 points est 2 carrés superposés. Le carré inférieur est l'élément lui-même, le carré supplémentaire est créé à l'aide du pseudo-élément :before . Le fond est tourné de 20 °, le carré supérieur est tourné de 135 °.

<div class="burst-8"></div>

.burst-8 {
  background: rgb(246, 156, 85);
  width: 40px;
  height: 40px;
  position: relative;
  text-align: center;
  -ms-transform: rotate(20deg);
  transform: rotate(20eg);
}

.burst-8::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 40px;
  width: 40px;
  background: rgb(246, 156, 85);
  -ms-transform: rotate(135deg);
  transform: rotate(135deg);
}

12 point Burst

Un éclat de 12 points est composé de 3 carrés superposés. Le carré du bas est l'élément lui-même, les carrés supplémentaires sont créés à l'aide des pseudo-éléments :before et :after . Le fond est tourné de 0 °, le carré suivant est tourné de 30 ° et le haut est tourné de 60 °.

<div class="burst-12"></div>

.burst-12 {
  width: 40px;
  height: 40px;
  position: relative;
  text-align: center;
  background: rgb(246, 156, 85);
}

.burst-12::before, .burst-12::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 40px;
  width: 40px;
  background: rgb(246, 156, 85);
}

.burst-12::before {
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}

.burst-12::after {
  -ms-transform: rotate(60deg);
  transform: rotate(60deg);
}

Cercles et Ellipses

Cercle

Pour créer un cercle , définissez un élément de même width et height (un carré ), puis définissez la propriété border-radius de cet élément sur 50% .

Capture d'écran

HTML

<div class="circle"></div>

CSS

.circle {
   width: 50px;
   height: 50px;
   background: rgb(246, 156, 85);
   border-radius: 50%;
}

Ellipse

Une ellipse est similaire à un cercle, mais avec des valeurs différentes pour la width et la height .

Capture d'écran

HTML

<div class="oval"></div>

CSS

.oval {
  width: 50px;
  height: 80px;
  background: rgb(246, 156, 85);
  border-radius: 50%;
}

Trapèze

Un trapèze peut être créé par un élément de bloc à hauteur nulle (hauteur de 0px ), une largeur supérieure à zéro et une bordure transparente, sauf pour un côté:

HTML:

<div class="trapezoid"></div>

CSS:

.trapezoid {
    width: 50px;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid black;
}

En changeant les côtés de la bordure, l'orientation du trapèze peut être ajustée.

cube

Cet exemple montre comment créer un cube à l'aide des méthodes de transformation 2D skewX() et skewY() sur des pseudo-éléments.

HTML:

<div class="cube"></div>

CSS:

.cube {
  background: #dc2e2e;
  width: 100px;
  height: 100px;
  position: relative;
  margin: 50px;
}

.cube::before {
  content: '';
  display: inline-block;
  background: #f15757;
  width: 100px;
  height: 20px;
  transform: skewX(-40deg);
  position: absolute;
  top: -20px;
  left: 8px;
}

.cube::after {
  content: '';
  display: inline-block;
  background: #9e1515;
  width: 16px;
  height: 100px;
  transform: skewY(-50deg);
  position: absolute;
  top: -10px;
  left: 100%;
}

Voir la démo

Pyramide

Cet exemple montre comment créer une pyramide à l' aide de bordures et de méthodes de transformation 2D skewY() et rotate() sur des pseudo-éléments.

HTML:

<div class="pyramid"></div>

CSS:

.pyramid {
  width: 100px;
  height: 200px;
  position: relative;
  margin: 50px;
}

.pyramid::before,.pyramid::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border: 50px solid;
  position: absolute;
}

.pyramid::before {
  border-color: transparent transparent #ff5656 transparent;
  transform: scaleY(2) skewY(-40deg) rotate(45deg);
}

.pyramid::after {
  border-color: transparent transparent #d64444 transparent;
  transform: scaleY(2) skewY(40deg) rotate(-45deg);
}

Modified text is an extract of the original Stack Overflow Documentation

Sous licence CC BY-SA 3.0

Non affilié à Stack Overflow

CSS
Formes à un seul élément

Recherche…