Come disegnare una forma di stella Utilizzando i CSS

February 8

Come disegnare una forma di stella Utilizzando i CSS


È possibile effettuare una forma di stella con poche righe di codice in un Cascading Style Sheet (CSS), invece di usare un file immagine per trasmettere la forma in una pagina Web. carichi di codice CSS più veloce di una immagine, che migliora l'esperienza del sito per i tuoi visitatori. E 'anche molto facile da modificare i colori e le proporzioni della forma quando si utilizzano i CSS, in quanto non necessita di software di elaborazione delle immagini.

La stella a sei facce è la forma più semplice stella per creare in CSS, in quanto comprende solo due triangoli.

istruzione

1 Aprire un documento HTML.

2 Nel <head> </ head> sezione del documento HTML, inserire il seguente codice:

<Style>

</ Style>

3 Creare un elemento chiamato "triangolo-up" all'interno del <style> </ style> sezione del documento HTML. Definire la proprietà dei bordi, larghezza e posizione dell'elemento di creare un triangolo. Ad esempio, per creare un triangolo che è 80 pixel (px) di larghezza e 60px alto, inserire il seguente codice:

triangolo-up {

border-color: transparent transparent #000000 transparent;

border-style: solido;

border-width: 0px 40px 60px 40px;

width: 0px;

position: absolute;

top: 0px;

}

4 Creare un elemento chiamato "triangolo-down" nella sezione <style> </ style> sezione del documento HTML. Questo triangolo dovrebbe essere una immagine speculare dell'elemento "triangolo-up". Il codice sarà simile a questa:

triangolo-down {

border-color: #000000 transparent transparent transparent;

border-style: solido;

border-width: 60px 40px 40px 0px;

width: 0px;

position: absolute;

top: 35px;

}

5 Inserire il seguente codice nel <body> </ body> sezione del documento HTML:

<Div id = "triangolo-up">

& Nbsp;

</ Div>

<Div id = "triangolo-down">

& Nbsp;

</ Div>

6 Salvare il documento HTML e aprirlo in un browser per vedere il risultato finale.