CSS Bursts


Esempio

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

inserisci la descrizione dell'immagine qui

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

inserisci la descrizione dell'immagine qui

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