¿Cómo se logran las esquinas de borde CSS biseladas en lugar de las esquinas redondeadas?

Con la propiedad CSS border-radius , puedo tener una esquina redondeada curvilínea y redondeada al final.

 .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; } 

Pero quiero un rincón de borde como la imagen de abajo. Si tengo dos casillas (Amarillo y Rosa) encontrándome y quiero una esquina dura en el punto de encuentro inferior (esquina de puntos), ¿qué debo hacer?

enter image description here

¿Es eso posible usar CSS?

Aquí hay una manera, aunque tiene algunas deficiencias, como sin fronteras y no es transparente:

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; } 

RESULTADO:

enter image description here

Aquí hay un violín.

Los gradientes de CSS3 pueden hacer el truco:

Prueba esto, aquí hay un violín :

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; } 

tengo uno

 

y este 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; } 

esto es lo que necesitas, transparencia y todo

Esto también es posible 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%); 

Ejemplo aquí … http://codepen.io/anon/pen/vGWoPv

Soporte para clip-path se puede encontrar aquí … http://caniuse.com/#search=clip-path

Una buena La mejor manera de archivar esto: border-images . En combinación con .svg una buena solución …

++ Incluye interfaz de usuario estilo Westworld en CSS ++

He actualizado la increíble respuesta de AlphaMale para hackear bordes achaflanados como se solicitó originalmente. Básicamente utiliza un div chaflán con un poco más pequeño dentro. El color de fondo del div externo se convierte en el color del borde cuando el rest del mismo está cubierto por el div interno con chaflanes coincidentes.

Probado en Edge, Chrome y Firefox.

Encontré esta página mientras buscaba duplicar algo así como la interfaz de usuario de Westworld que tiene esquinas biseladas desiguales. Mira el violín de JS para ver cómo he improvisado esto junto con un esquema de colores y un cuadro de ejemplo de la escena de encadenamiento de habla de Westworld.

Código en JSFiddle (CSS a continuación): http://jsfiddle.net/S2nqK/345/

Ícono de la IU de Westworld en: 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, entonces hice una biblioteca JS para automatizar la creación de bordes achaflanados. Tiene dos métodos para crear los chaflanes:

Método 1: crea un fondo biselado utilizando Canvas API y lo establece como la background-image de background-image CSS del elemento.

Método 2: agrega 4 elementos DOM de triángulo basados ​​en CSS alrededor del objective, haciendo el chaflán.

Te quedarás con el método 1 cuando puedes dejar que la biblioteca establezca la background-image , y necesitarás el método 2 cuando tu objective ya tenga un fondo, como en .

El uso es simple, solo llame a ChamferBg para usar el método 1, o ChamferEnvelop para usar el método 2:

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

Las opciones y sus valores predeterminados son:

 { 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 } 

Tendrá que establecer resize_observe en true si usa el método 1 y su elemento puede cambiar su tamaño en el tiempo de ejecución, ya que necesitará recrear el fondo biselado cada vez que cambie de tamaño.