CSS
Forme ad elementi singoli
Ricerca…
Piazza
Per creare un quadrato, definisci un elemento con larghezza e altezza. Nell'esempio seguente, abbiamo un elemento con una width e height di 100 pixel ciascuna.
<div class="square"></div>
.square {
width: 100px;
height: 100px;
background: rgb(246, 156, 85);
}
triangoli
Per creare un triangolo CSS, definisci un elemento con larghezza e altezza di 0 pixel. La forma del triangolo sarà formata usando le proprietà del bordo. Per un elemento con altezza e larghezza 0 i 4 bordi (in alto, a destra, in basso, a sinistra) formano ciascuno un triangolo. Ecco un elemento con 0 altezza / larghezza e 4 diversi bordi colorati.
Impostando alcuni bordi su trasparente e altri su un colore, possiamo creare vari triangoli. Ad esempio, nel triangolo Su, impostiamo il bordo inferiore sul colore desiderato, quindi impostiamo i bordi sinistro e destro su trasparente. Ecco un'immagine con i bordi sinistro e destro leggermente ombreggiati per mostrare come si forma il triangolo.
Le dimensioni del triangolo possono essere modificate modificando le diverse larghezze dei bordi: più alte, più corte, inclinate, ecc. Gli esempi seguenti mostrano un triangolo di 50x50 pixel.
Triangolo - Puntamento verso l'alto
<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);
}
Triangolo - Puntamento verso il basso
<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);
}
Triangolo - Puntamento a destra
<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);
}
Triangolo - Puntamento a sinistra
<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);
}
Triangolo - Puntamento verso l'alto / verso destra
<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;
}
Triangolo - Puntamento verso l'alto / sinistra
<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;
}
Triangolo - Puntamento verso il basso / destra
<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;
}
Triangolo - Puntamento verso il basso / sinistra
<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;
}
Bursts
Una raffica è simile a una stella ma con i punti che si estendono meno dal corpo. Pensa a una forma a raffica come un quadrato con altri quadrati leggermente ruotati sovrapposti.
I quadrati aggiuntivi vengono creati usando gli elementi psuedo ::before e ::after .
8 punti Burst
Una raffica di 8 punti sono 2 quadrati sovrapposti. Il quadrato inferiore è l'elemento stesso, il quadrato aggiuntivo viene creato usando lo pseudo-elemento :before . Il fondo è ruotato di 20 °, il quadrato superiore è ruotato di 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 punti Burst
Una raffica di 12 punti sono 3 quadrati sovrapposti. Il quadrato inferiore è l'elemento stesso, i quadrati aggiuntivi vengono creati usando gli pseudo-elementi :before e :after . Il fondo viene ruotato di 0 °, il quadrato successivo viene ruotato di 30 ° e la parte superiore viene ruotata di 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);
}
Cerchi ed ellissi
Cerchio
Per creare un cerchio , definire un elemento con width e height uguali (un quadrato ) e quindi impostare la proprietà border-radius di questo elemento su 50% .
HTML
<div class="circle"></div>
CSS
.circle {
width: 50px;
height: 50px;
background: rgb(246, 156, 85);
border-radius: 50%;
}
Ellisse
Un'ellisse è simile a un cerchio, ma con valori diversi per width e height .
HTML
<div class="oval"></div>
CSS
.oval {
width: 50px;
height: 80px;
background: rgb(246, 156, 85);
border-radius: 50%;
}
trapezio
Un trapezio può essere creato da un elemento di blocco con altezza zero (altezza di 0px ), una larghezza maggiore di zero e un bordo, che è trasparente ad eccezione di un lato:
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;
}
Con la modifica dei lati del bordo, è possibile regolare l'orientamento del trapezio.
Cubo
Questo esempio mostra come creare un cubo usando i metodi di trasformazione 2D skewX() e skewY() su pseudo elementi.
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%;
}
Piramide
Questo esempio mostra come creare una piramide usando i bordi e i metodi di trasformazione 2D skewY() e rotate() su pseudo elementi.
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);
}