Articles of css shapes

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; } […]

Invertire l’angolo arrotondato in CSS?

Ho un codice CSS: -moz-border-radius-topleft:50px; Ottengo il risultato: C’è qualche possibilità di dare come questo:

Forma a triangolo con immagine di sfondo

Sto lavorando a un progetto che richiede due triangoli per contenere immagini di sfondo e collegamenti. Ecco il mio mock up per come vorrei i due triangoli. Attualmente, ho solo due div che si estendono su 900×600 con ciascun triangolo come immagine di sfondo. Il problema che sto avendo ora è che non posso passare […]

Triangolo reattivo CSS con larghezza delle percentuali

Il codice seguente creerà una freccia proprio sotto un elemento : JSFiddle .btn { position: relative; display: inline-block; width: 100px; height: 50px; text-align: center; color: white; background: gray; line-height: 50px; text-decoration: none; } .btn:after { content: “”; position: absolute; bottom: -10px; left: 0; width: 0; height: 0; border-width: 10px 50px 0 50px; border-style: solid; border-color: […]

Controlla la lunghezza del tratto tratteggiato e la distanza tra i tratti

È ansible controllare la lunghezza e la distanza tra tratti di tratto tratteggiato in CSS? Questo esempio di seguito viene visualizzato in modo diverso tra i browser: div { border: dashed 4px #000; padding: 20px; display: inline-block; } I have a dashed border! Grandi differenze: IE 11 / Firefox / Chrome Esistono metodi in grado […]

Raggio del bordo in percentuale (%) e pixel (px) o em

Se utilizzo un valore di pixel o em per il raggio del bordo, il raggio del bordo è sempre un arco circolare o una forma di pillola anche se il valore è maggiore del lato più grande dell’elemento. Quando utilizzo le percentuali , il raggio del bordo è ellittico e inizia al centro di ciascun […]