CSS => Vormen uit één element

Plein

Om een vierkant te maken, definieert u een element met zowel een breedte als een hoogte. In het onderstaande voorbeeld hebben we een element met een width en height van elk 100 pixels.

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

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

driehoeken

Definieer een element met een breedte en hoogte van 0 pixels om een CSS-driehoek te maken. De driehoeksvorm wordt gevormd met behulp van randeigenschappen. Voor een element met 0 hoogte en breedte vormen de 4 randen (boven, rechts, onder, links) elk een driehoek. Hier is een element met 0 hoogte / breedte en 4 verschillende gekleurde randen.

Door sommige randen transparant in te stellen en andere een kleur, kunnen we verschillende driehoeken maken. In de driehoek Omhoog stellen we bijvoorbeeld de onderste rand in op de gewenste kleur en vervolgens de linker- en rechterrand op transparant. Hier is een afbeelding met de linker- en rechterrand lichtjes gearceerd om te laten zien hoe de driehoek wordt gevormd.

De afmetingen van de driehoek kunnen worden gewijzigd door de verschillende randbreedtes te wijzigen - groter, korter, scheef, enz. De voorbeelden hieronder laten allemaal een driehoek van 50x50 pixels zien.

Driehoek - Naar boven gericht

<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);
}

Driehoek - Naar beneden gericht

<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);
}

Driehoek - Naar rechts wijzend

<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);
}

Driehoek - Naar links wijzend

<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);
}

Driehoek - Omhoog / Rechts

<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;
}

Driehoek - Naar boven / links wijzend

<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;
}

Driehoek - Naar beneden / rechts wijzend

<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;
}

Driehoek - Naar beneden / links wijzend

<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;
}

uitbarstingen

Een burst is vergelijkbaar met een ster, maar met de punten die zich op minder afstand van het lichaam uitstrekken. Zie een burst-vorm als een vierkant met extra, enigszins gedraaide vierkanten bovenop.

De extra vierkanten worden gemaakt met behulp van de ::before en ::after psuedo-elementen.

8-punts burst

Een burst met 8 punten bestaat uit vierlagige vierkanten. Het onderste vierkant is het element zelf, het extra vierkant wordt gemaakt met behulp van het :before pseudo-element. De onderkant is 20 ° gedraaid, het bovenste vierkant is 135 ° gedraaid.

<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-punts burst

Een 12-punts burst zijn 3 gelaagde vierkanten. Het onderste vierkant is het element zelf, de extra vierkanten worden gemaakt met behulp van de :before en :after pseudo-elementen. De onderkant is 0 ° gedraaid, het volgende vierkant is 30 ° gedraaid en de bovenkant is 60 ° gedraaid.

<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);
}

Cirkels en ellipsen

Cirkel

Om een cirkel te maken, definieert u een element met een gelijke width en height (een vierkant ) en stelt u vervolgens de eigenschap border-radius van dit element in op 50% .

screenshot

HTML

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

CSS

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

Ovaal

Een ellips lijkt op een cirkel, maar met verschillende waarden voor width en height .

screenshot

HTML

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

CSS

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

trapezium

Een trapezium kan worden gemaakt door een blokelement met nulhoogte (hoogte van 0 0px ), een breedte groter dan nul en een rand, die transparant is behalve voor één zijde:

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;
}

Door de randzijden te wijzigen, kan de oriëntatie van de trapezium worden aangepast.

Kubus

Dit voorbeeld laat zien hoe u een kubus maakt met behulp van 2D-transformatiemethoden skewX() en skewY() op pseudo-elementen.

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%;
}

Zie demo

Piramide

Dit voorbeeld laat zien hoe u een piramide maakt met randen en 2D-transformatiemethoden skewY() en rotate() op pseudo-elementen.

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

Licentie onder CC BY-SA 3.0

Niet aangesloten bij Stack Overflow

CSS
Vormen uit één element

Zoeken…