Articles of css shapes

Arrow Box con CSS

Come posso creare questa scatola in CSS? Ho visto alcuni tutorial che insegnano come creare scatole con le frecce, tuttavia, nel mio caso, nessuno di questi tutorial è adatto.

Forma CSS 3: “Inverse Circle” o “Cut Out Circle”

Voglio creare una forma, che descriverei come “cerchio inverso”: L’immagine è in qualche modo imprecisa, perché la linea nera dovrebbe continuare lungo il bordo esterno dell’elemento div. Ecco una demo di quello che ho al momento: http://jsfiddle.net/n9fTF/ È ansible anche con i CSS senza immagini?

Segmenti in circolo usando CSS3

So che puoi creare una circonferenza in CSS3 usando l’hack del raggio di confine. Ma c’è un modo per farli avere segmenti come questa immagine? C’è un modo per farlo attraverso HTML e CSS ma non con JS?

Come disegnare un settore cerchia in CSS?

Bene, disegnare un cerchio con puro CSS è facile. .circle { width: 100px; height: 100px; border-radius: 100px; border: 3px solid black; background-color: green; } Come disegno un settore? Dato un grado X [0-360] voglio disegnare un settore X gradi. Posso farlo con puro CSS? Per esempio: Grazie + Esempio Grazie Jonathan, ho usato il primo […]

Creazione di un menu radiale in CSS

Come posso creare un menu simile a questo … Collegamento a PSD Non voglio usare le immagini PSD. Preferirei usare le icone di alcuni pacchetti come FontAwesome e avere gli sfondi / css generati in CSS. Una versione del menu che utilizza il PSD per generare immagini del tooltip e quindi utilizzarlo può essere trovata […]

È ansible creare un angolo angolato in CSS?

Mi chiedo se c’è un modo per creare questa forma con puro CSS. Per estendere ulteriormente questo problema, questa forma deve ritagliare l’immagine all’interno (pensacanvas come una maschera – ma il bordo grigio deve essere visibile). O sto meglio creando questo in canvas / svg?

Disegna linee diagonali in background div con CSS

Ho div per casella di anteprima HTML: PREVIEW CSS: .preview-content { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAGklEQVQIW2NkYGD4D8SMQAwGcAY2AbBKDBUAVuYCBQPd34sAAAAASUVORK5CYII=) repeat; width: 100%; min-height: 300px; max-height: 300px; line-height: 300px; text-align: center; vertical-align: middle; font-size: 2em; } Q: come aggiungere linee diagonali per divare lo sfondo come nell’immagine nota: con CSS solo se ansible Grazie in anticipo

Come aggiungere un bordo nel percorso della clip: poligono (); Stile CSS

Voglio sapere se è ansible aggiungere un border nel mio clip-path:polygon(); stile o un altro modo per aggiungere un bordo? come: border:5px solid red; CSS .poligon { display: inline-block; position:relative; width:150px; height:150px; background: black; box-sizing:border-box; padding:55px; } .poligon img { display: inline-block; border:5px solid red; width:150px; height:150px; -webkit-clip-path: polygon(92.32051% 40%, 93.79385% 43.1596%, 94.69616% 46.52704%, 95% […]

Allinea il testo sulla linea inclinata

È ansible rendere il testo allineato a sinistra su una linea inclinata ? l’allineamento dovrebbe seguire l’immagine inclinata inclinata con il supporto richiesto per IE9 +? Il mio codice di esempio: img { display: block; float: left; transform: rotate(-5deg); margin: 0 15px; } Lorem ipsum dolor sit amet. Vestibulum commodo volutpat a, convallis ac, laoreet […]

Angolo inclinato sulla scatola CSS

Ho giocato con i CSS solo per poco tempo e sto provando ad avere una scatola normale ma con l’angolo in alto a sinistra tagliato con un angolo di 45 gradi. Neppure una piccola quantità; Sto guardando un angolo piuttosto grande tagliato a quell’angolo. Questo effetto: Come dovrei farlo?