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:

http://tadesign.net/corner.jpg

Come dovrei farlo?

descrizioni

Slantastic ( http://meyerweb.com/eric/css/edge/slantastic/demo.html ) supporta i vecchi browser. Per i CSS3 specifici, prova i poligoni CSS: http://alastairc.ac/2007/02/dissecting-css-polygons/ .

Codice

L’HTML:

 
Hello

Il CSS:

 .cornered { width: 160px; height: 0px; border-bottom: 40px solid red; border-right: 40px solid white; } .main { width: 200px; height: 200px; background-color: red; } 

Il risultato: http://jsfiddle.net/mdQzH/

Codice alternativo

Per utilizzare bordi e testo trasparenti nella sezione del bordo … L’HTML:

 
It's possible to put text up here, too but if you want it to follow the slant you have to stack several of these.
Hello hello hello hello hello hello hello hello hello

Il CSS:

 .outer { background-color: #ccffff; padding: 10px; font-size: x-small; } .cornered { width: 176px; height: 0px; border-bottom: 40px solid red; border-left: 40px solid transparent; } .main { width: 200px; height: 200px; background-color: red; padding: 0 8px; } 

Il risultato: http://jsfiddle.net/76EUw/2

Questo può essere fatto usando il clip-path svg.

vantaggi:

  1. Lavora con un div regolare
  2. Nessun confine hacky per creare forms
  3. Non applicare alcuna rotazione in modo da poterlo fare facilmente su uno sfondo non uniforms
  4. Non aggiunge alcun elemento div tramite CSS in modo che tu possa ancora lavorare con lo sfondo div regolare (nel caso in cui tu abbia il codice che lo modifica per esempio!)

Il seguente CSS modellerà il div con l’angolo in basso a destra in modo da poter inserire qualsiasi sfondo:

 -webkit-clip-path: polygon(100% 0, 100% 65%, 54% 100%, 0 100%, 0 0); clip-path: polygon(100% 0, 100% 65%, 54% 100%, 0 100%, 0 0); 

Esistono più generatori SVG online:

Nel prossimo futuro è ansible ottenere ciò con il modulo CSS Shapes .

Con la proprietà shape-inside , possiamo rendere il stream del testo in base alla forma.

La forma che forniamo può essere una di inset (), circle (), ellipse () o polygon ().

Questo può essere fatto attualmente nei browser webkit, ma prima devi fare quanto segue: (istruzioni dalla piattaforma Web )

Per abilitare le forms, le regioni e le modalità di fusione:

1) Copia e incolla opera: // flags / # enable-experimental-web-platform-features nella barra degli indirizzi, quindi premi invio.

2) Fare clic sul collegamento “Abilita” all’interno di quella sezione.

3) Fare clic sul pulsante “Riavvia ora” nella parte inferiore della finestra del browser.

Se lo hai fatto, controlla questo FIDDLE

che assomiglia a questo:

inserisci la descrizione dell'immagine qui

 
Text here

CSS

 .shape{ -webkit-shape-inside: polygon(65px 200px,65px 800px,350px 800px,350px 80px,160px 80px); shape-inside: polygon(65px 200px,65px 450px,350px 450px,350px 80px,160px 80px); text-align: justify; } 

Per contrarre la forma del poligono – ho usato questo sito

Maggiori informazioni sulle varie proprietà supportate sono disponibili qui

CSS3 linear-gradient() può disegnare questo sfondo.

 background: linear-gradient(to bottom right, transparent 50px, blue 50px); 
 body { background: linear-gradient(red, orange) no-repeat; min-height: 100vh; margin: 0; } div { background: linear-gradient(to bottom right, transparent 50px, blue 50px); margin: 25px auto; padding: 50px; height: 200px; width: 200px; color: white; } 
 
Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet...

Ho trovato una soluzione amichevole e retriggers di Ray Toal fiddle: http://jsfiddle.net/duk3/hCaXv/

L’html:

 
It's possible to put text up here, too but if you want it to follow the slant you have to stack several of these.
Hello llo hello llo hello hello hello llo hello hello hello hello hello hello hello hello

Il css:

 .outer { background-color: #ccffff; padding: 10px; font-size: x-small; } .cornered { width: 100%; box-sizing:border-box; height: 0px; border-bottom: 2em solid red; border-left: 2em solid transparent; border-right: 2em solid transparent; } .main { background-color: red; padding: 0 2em; } 

Spero che sia d’aiuto !

Sono riuscito a fare qualcosa di molto simile usando solo un’ulteriore estensione e l’effetto è stato fatto tramite CSS.

jsFiddle per illustrare.

HTML

CSS

 `.more-videos { padding: 20px; } .more-videos a { text-decoration: none; background-color: #7f7f7f; position: relative; padding: 10px 10px 5px 15px; } .more-videos a span { font-size: 20px; color: #ffffff; } .more-videos a span.text { padding-right: 10px; } .more-videos a span.corner { border-top: 15px solid #7f7f7f; border-right: 15px solid #4d4c51; border-bottom: none; border-left: none; bottom: 0px; right: 0px; position: absolute; } .more-videos a:hover span.corner { border-right: 15px solid #999999; } 

Ho incluso uno stile di hover triggersto dal genitore. Il ‘border-right: 15px solid # 4d4c51;’ il colore è quello che deve essere diverso dal colore di sfondo di ancoraggio genitore per creare il contrasto diagonale / angular.