CSS
Enkla elementformer

Fyrkant

För att skapa en kvadrat definierar du ett element med både en bredd och höjd. I exemplet nedan har vi ett element med en width och height på 100 pixlar vardera.

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

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

trianglar

För att skapa en CSS-triangel definierar du ett element med en bredd och höjd på 0 pixlar. Triangelformen kommer att bildas med hjälp av kantegenskaper. För ett element med 0 höjd och bredd bildar de fyra gränserna (övre, höger, botten, vänster) vardera en triangel. Här är ett element med 0 höjd / bredd och 4 olika färgade kanter.

Genom att ställa in några gränser till transparent och andra till en färg kan vi skapa olika trianglar. I upp-triangeln ställer vi till exempel nedkanten på önskad färg och ställer sedan vänster och höger kant på transparent. Här är en bild med vänster och höger kant skuggade något för att visa hur triangeln bildas.

Dimensionerna på triangeln kan ändras genom att ändra de olika kantbredderna - högre, kortare, vid sida etc. Exemplen nedan visar en triangel på 50x50 pixlar.

Triangel - pekar uppåt

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

Triangel - pekar ner

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

Triangel - pekar åt höger

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

Triangel - pekande vänster

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

Triangel - pekande upp / höger

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

Triangel - pekande upp / vänster

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

Triangel - pekande nedåt / höger

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

Triangel - pekande nedåt / vänster

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

skurar

En skur liknar en stjärna men med punkterna sträcker sig mindre avstånd från kroppen. Tänk på en skurform som en kvadrat med ytterligare, lätt roterade fyrkanter i lager ovanpå.

De ytterligare rutorna skapas med ::before och ::after psuedo-element.

8 Point Burst

En 8-punkts burst är två skiktade rutor. Den nedre fyrkanten är själva elementet, den ytterligare fyrkanten skapas med hjälp av :before pseudo-elementet. Botten roteras 20 °, den övre fyrkanten roteras 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

En 12-punkts burst är tre lager i rutor. Den nedre fyrkanten är själva elementet, de ytterligare rutorna skapas med :before och :after pseudo-element. Botten roteras 0 °, nästa fyrkant roteras 30 ° och toppen roteras 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);
}

Cirklar och ellipser

Cirkel

För att skapa en cirkel, definierar ett element med en lika stor width och height (en kvadrat ) och sedan ställa in border-radius egenskap hos detta element till 50% .

html

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

CSS

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

Ellips

En ellips liknar en cirkel, men med olika värden för width och height .

html

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

CSS

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

trapezoid

En trapezoid kan tillverkas av ett blockelement med nollhöjd (höjd 0px ), en bredd större än noll och en kant, som är transparent med undantag för en sida:

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

När du ändrar gränssidorna kan trapezoidens orientering justeras.

Kub

Detta exempel visar hur man skapar en kub med 2D-transformationsmetoder skewX() och skewY() på pseudoelement.

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

Se demo

Pyramid

Detta exempel visar hur man skapar en pyramid med hjälp av gränser och 2D-transformationsmetoder skewY() och rotate() på pseudoelement.

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