Come ottenere angoli di confine CSS smussati anziché angoli arrotondati?

Con la proprietà CSS border-radius posso avere un angolo sinuoso e arrotondato alla fine.

 .boxLeft{ border-right: 1px dashed #333; border-bottom: 1px dashed #333; border-radius: 0 0 10px 0; } .boxRight{ border-left: 1px dashed #333; border-bottom: 1px dashed #333; border-radius: 0 0 0 10px; } 

Ma voglio un angolo di confine come l’immagine qui sotto. Se ho due scatole (giallo e rosa) che si incontrano e voglio un angolo duro nel punto di incontro inferiore (angolo puntato), cosa dovrei fare?

inserisci la descrizione dell'immagine qui

È ansible usare i CSS?

Ecco un modo, anche se ha alcune carenze, come nessun confine e non è trasparente:

HTML:

 

CSS:

 .left, .right { width: 100px; height: 100px; float: left; position: relative; } .left { background: lightpink; } .right { background: lightblue; } .right::after, .left::after { width: 0px; height: 0px; background: #fff; content: ''; position: absolute; bottom: 0; } .right::after { left: 0; border-top: 10px solid lightblue; border-right: 10px solid lightblue; border-left: 10px solid white; border-bottom: 10px solid white; } .left::after { right: 0; border-top: 10px solid lightpink; border-right: 10px solid white; border-left: 10px solid lightpink; border-bottom: 10px solid white; } 

RISULTATO:

inserisci la descrizione dell'immagine qui

Ecco un violino.

I gradienti CSS3 possono fare il trucco:

Prova questo, ecco un violino :

http://jsfiddle.net/S2nqK/3/

HTML:

  
Div 1
Div 2

CSS:

 div { background: #c00; /* fallback */ background: -moz-linear-gradient(45deg, transparent 10px, #c00 10px), -moz-linear-gradient(135deg, transparent 10px, #c00 10px), -moz-linear-gradient(225deg, transparent 10px, #c00 10px), -moz-linear-gradient(315deg, transparent 10px, #c00 10px); background: -o-linear-gradient(45deg, transparent 10px, #c00 10px), -o-linear-gradient(135deg, transparent 10px, #c00 10px), -o-linear-gradient(225deg, transparent 10px, #c00 10px), -o-linear-gradient(315deg, transparent 10px, #c00 10px); background: -webkit-linear-gradient(45deg, transparent 10px, #c00 10px), -webkit-linear-gradient(135deg, transparent 10px, #c00 10px), -webkit-linear-gradient(225deg, transparent 10px, #c00 10px), -webkit-linear-gradient(315deg, transparent 10px, #c00 10px); } div { background-position: bottom left, bottom right, top right, top left; -moz-background-size: 50% 50%; -webkit-background-size: 50% 50%; background-size: 50% 50%; background-repeat: no-repeat; } /* Ignore the CSS from this point, it's just to make the demo more presentable */ div { float:left; width: 50px; margin:15px auto; padding:15px; color: white; line-height:1.5; } 

Ne ho preso uno

 

e questo css

 .left, .right { width: 100px; height: 100px; float: left; position: relative; overflow:hidden; } .right::after, .left::after { content: ''; width:200px; height:200px; position:absolute; -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .right::after { background: lightblue; left:-40px; top:-100px; } .left::after { background: lightpink; left:-60px; top:-100px; } 

questo è quello che ti serve, la trasparenza e tutto

Questo è anche ansible usando “clip-path”.

 -webkit-clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%); clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%); 

Esempio qui … http://codepen.io/anon/pen/vGWoPv

Il supporto per il percorso clip può essere trovato qui … http://caniuse.com/#search=clip-path

Un buono Il modo migliore per archiviarlo: border-images . In combinazione con .svg una buona soluzione …

++ Include l’interfaccia utente di Westworld Style in CSS ++

Ho aggiornato la fantastica risposta di AlphaMale per incidere i bordi smussati come originariamente richiesto. Fondamentalmente usa un div smussato con un po ‘più piccolo all’interno di esso. Il colore di sfondo del div esterno diventa il colore del bordo quando il resto viene coperto dal div interno con gli smussi corrispondenti.

Testato su Edge, Chrome e Firefox.

Ho trovato questa pagina cercando di duplicare qualcosa come l’ interfaccia utente di Westworld che ha angoli smussati diversi. Guarda il violino di JS per come l’ho accartocciato insieme con una combinazione di colors e un riquadro di esempio della scena di concatenazione vocale di Westworld.

Codice su JSFiddle (CSS sotto): http://jsfiddle.net/S2nqK/345/

Westworld UI pic a: https://qph.ec.quoracdn.net/main-qimg-44c9f03b2abfe9f3833763eece1b0cc4?convert_to_webp=true

 body {background-color: #353535; font-family: 'Open Sans';} .div-outer { /* Chrome / Safari */ background: -webkit-linear-gradient(45deg, transparent 0px, #6ea1a1 0px), /* bottom left */ -webkit-linear-gradient(135deg, transparent 14px, #6ea1a1 14px), /* bottom right */ -webkit-linear-gradient(225deg, transparent 0px, #6ea1a1 0px), /* top right */ -webkit-linear-gradient(315deg, transparent 5px, #6ea1a1 5px); /* top left */ /* Firefox */ background: -moz-linear-gradient(45deg, transparent 0px, #6ea1a1 0px), /* bottom left */ -moz-linear-gradient(135deg, transparent 14px, #6ea1a1 14px), /* bottom right */ -moz-linear-gradient(225deg, transparent 0px, #6ea1a1 0px), /* top right */ -moz-linear-gradient(315deg, transparent 5px, #6ea1a1 5px); /* top left */ /* Opera */ background: -o-linear-gradient(45deg, transparent 0px, #6ea1a1 0px), /* bottom left */ -o-linear-gradient(135deg, transparent 14px, #6ea1a1 14px), /* bottom right */ -o-linear-gradient(225deg, transparent 0px, #6ea1a1 0px), /* top right */ -o-linear-gradient(315deg, transparent 5px, #6ea1a1 5px); /* top left */ padding: 2px; color: #fff; } .div-inner { background: -webkit-linear-gradient(45deg, transparent 0px, #000 0px), -webkit-linear-gradient(135deg, transparent 14px, #000 14px), -webkit-linear-gradient(225deg, transparent 0px, #000 0px), -webkit-linear-gradient(315deg, transparent 5px, #000 5px); background: -moz-linear-gradient(45deg, transparent 0px, #000 0px), -moz-linear-gradient(135deg, transparent 14px, #000 14px), -moz-linear-gradient(225deg, transparent 0px, #000 0px), -moz-linear-gradient(315deg, transparent 5px, #000 5px); background: -o-linear-gradient(45deg, transparent 0px, #000 0px), -o-linear-gradient(135deg, transparent 14px, #000 14px), -o-linear-gradient(225deg, transparent 0px, #000 0px), -o-linear-gradient(315deg, transparent 5px, #000 5px); padding: 10px; height: 92px; text-align: center; } .div-outer, .div-inner { background-position: bottom left, bottom right, top right, top left; -moz-background-size: 50% 50%; -webkit-background-size: 50% 50%; background-size: 50% 50%; background-repeat: no-repeat; } .contain { width: 180px; } .title {background-color: #76ffff; padding: 6px; color: #000; border-radius: 2px; font-weight: bold; text-align-last: justify; text-align: justify; } .font-large {font-size: 34pt;} .font-tiny {font-size: 10pt;} .cyan {color: #76ffff;} /* Ignore the CSS from this point, it's just to make the demo more presentable */ .arrow-right { width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 8px solid #fff; display: inline-block; vertical-align: middle; } p:first-of-type { margin-top: 0 } p:last-of-type { margin-bottom: 0} 

Ok, ho creato una libreria JS per automatizzare la creazione di bordi smussati. Ha due metodi per creare gli smussi:

Metodo 1: crea uno sfondo smussato usando l’API Canvas e lo imposta come background-image di background-image CSS dell’elemento.

Metodo 2: aggiunge 4 elementi DOM triangolari basati su CSS attorno al bersaglio, rendendo lo smusso.

Continuerai con il metodo 1 quando puoi lasciare che la libreria imposti l’ background-image , e avrai bisogno del metodo 2 quando il tuo objective ha già uno sfondo, come in .

L’utilizzo è semplice, basta chiamare ChamferBg per utilizzare il metodo 1 o ChamferEnvelop per utilizzare il metodo 2:

 var el = document.getElementById('box'); ChamferBg(el, { size: 20, sw: 6, sc: '#447aec', fc: '#21ceff', tl: false, br: false, resize_observe: true }); 

Le opzioni e le loro impostazioni predefinite sono:

 { size: 5, // chamfer size sw: 1, // stroke width sc: 'black', // stroke color, fc: undefined, // fill color fp: undefined, // URL of an image to use as fill pattern tl: true, // chamfer top-left corner? tr: true, // chamfer top-right corner? bl: true, // chamfer bottom-left corner? br: true, // chamfer bottom-right corner? resize_observe: false // turn on resize_observe observer? // this will observer whenever the element // resizes and will refresh the background } 

Sarà necessario impostare resize_observe su true se si utilizza il metodo 1 e l’elemento potrebbe modificarne le dimensioni in fase di esecuzione, poiché in tal caso sarà necessario ricreare lo sfondo smussato ogni volta che viene ridimensionato.