Articles of css shapes

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?

css: come disegnare cerchio con il testo in mezzo?

Ho trovato questo esempio su StackOverflow: Disegna il cerchio usando solo CSS Che è grandioso. Ma mi piacerebbe sapere come modificare quell’esempio in modo da poter includere il testo nel mezzo del cerchio? Ho anche trovato questo: Centrare verticalmente e orizzontalmente il testo in cerchio in CSS (come il badge di notifica di iPhone) ma […]

Come posso creare un “tooltip tail” usando puro CSS?

Ho appena trovato un trucco CSS accurato. Guarda il violino … .tooltiptail { display: block; border-color: #ffffff #a0c7ff #ffffff #ffffff; border-style: solid; border-width: 20px; width: 0px; height: 0px; } .anothertail { background-image: url(http://static.jqueryfordesigners.com/demo/images/coda/bubble-tail2.png); display: block; height: 29px; width: 30px; } Cool Trick: How do I get this effect with only CSS? Questo crea un piccolo […]

CSS3 Trasforma l’inclinazione di un lato

È ansible creare “CSS3 Transform Skew One Side” Ho trovato una soluzione, ma non mi è utile, perché ho bisogno di usare un’immagine per lo sfondo (non il colore) #skewOneSide { border-bottom: 40px solid #FF0000; border-left: 50px solid rgba(0, 0, 0, 0); height: 0; line-height: 40px; width: 100px; } Anche questo JsFiddle non è utile […]

È ansible un raggio di confine concavo?

Ecco un semplice esempio convesso. http://jsfiddle.net/swY5k/ #test{ width: 200px; height: 200px; background: #888888; border-radius: 50px; } Tuttavia, voglio un raggio di confine concavo. Ho provato a rendere negativo il bordo-raggio, ma questo non ha funzionato. Esempio di concavo / convesso:

Come inclinare l’elemento ma mantenere il testo normale (non modellato)

È ansible riprodurre questa immagine usando solo i CSS? Voglio applicare questo al mio menu, quindi lo sfondo marrone appare hover al hover del hover Non so come farlo, ho solo; .menu li a:hover{ display:block; background:#1a0000; padding:6px 4px; }

Wave (o shape?) Con bordo su CSS3

Ho bisogno di implementare una forma d’onda con CSS3, ho cercato di implementare con CSS3 Shapes, ma non ho raggiunto il risultato desiderato. * { margin: 0; padding: 0; } body { background: #007FC1; } .container, .panel { border-bottom: 4px solid #B4CAD8; } .container { background-color: #fff; } .container > .text { padding: 0.5em; } […]