Sök…


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.

en ruta

<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.

ange bildbeskrivning här

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.

ange bildbeskrivning här

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

ange bildbeskrivning här

<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

ange bildbeskrivning här

<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

ange bildbeskrivning här

<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

ange bildbeskrivning här

<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

ange bildbeskrivning här

<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

ange bildbeskrivning här

<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

ange bildbeskrivning här

<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

ange bildbeskrivning här

<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 °.

ange bildbeskrivning här

<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 °.

ange bildbeskrivning här

<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% .

skärmdump

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 .

skärmdump

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:

trapezoid

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.

ange bildbeskrivning här

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.

Pyramid

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
Licensierat under CC BY-SA 3.0
Inte anslutet till Stack Overflow