Solución:
Si el elemento principal tiene un fondo de color sólido, puede usar pseudoelementos para crear el efecto:
div {
height: 300px;
background: red;
position: relative;
}
div:before {
content: '';
position: absolute;
top: 0; right: 0;
border-top: 80px solid white;
border-left: 80px solid red;
width: 0;
}
<div></div>
http://jsfiddle.net/2bZAW/
PD La próxima border-corner-shape
es exactamente lo que estás buscando. Lástima que podría quedar eliminado de la especificación y nunca llegar a ningún navegador en la naturaleza 🙁
Si necesitas un borde recortado transparente, puede utilizar un pseudo elemento girado como fondo para el div
y colóquelo para cortar la esquina deseada:
body {
background: url(http://i.imgur.com/k8BtMvj.jpg);
background-size: cover;
}
div {
position: relative;
width: 50%;
margin: 0 auto;
overflow: hidden;
padding: 20px;
text-align: center;
}
div:after {
content: '';
position: absolute;
width: 1100%; height: 1100%;
top: 20px; right: -500%;
background: rgba(255,255,255,.8);
transform-origin: 54% 0;
transform: rotate(45deg);
z-index: -1;
}
<div>
... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>
</div>
Tenga en cuenta que esta solución utiliza transformaciones y debe agregar los prefijos de proveedor necesarios. Para obtener más información, consulte canIuse.
Para cortar el borde inferior derecho, puede cambiar las propiedades top, transform y transform-origin del pseudo elemento a:
body {
background: url(http://i.imgur.com/k8BtMvj.jpg);
background-size: cover;
}
div {
position: relative;
width: 50%;
margin: 0 auto;
overflow: hidden;
padding: 20px;
text-align: center;
}
div:after {
content: '';
position: absolute;
width: 1100%; height: 1100%;
bottom: 20px; right: -500%;
background: rgba(255,255,255,.8);
transform-origin: 54% 100%;
transform: rotate(-45deg);
z-index: -1;
}
<div>
... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>
</div>
Ruta del clip CSS
El uso de una ruta de clip es una alternativa nueva y emergente. Está comenzando a recibir más y más apoyo y ahora está bien documentado. Dado que utiliza SVG para crear la forma, responde directamente desde el primer momento.
- Puedo usar
- Generador de ruta de clip
div {
width: 200px;
min-height: 200px;
-webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 25%, 75% 0);
clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 25%, 75% 0);
background: lightblue;
}
<div>
<p>Some Text</p>
</div>
Transformación CSS
Tengo una alternativa a la respuesta de transformación de web-tiki.
body {
background: lightgreen;
}
div {
width: 200px;
height: 200px;
background: transparent;
position: relative;
overflow: hidden;
}
div.bg {
width: 200%;
height: 200%;
background: lightblue;
position: absolute;
top: 0;
left: -75%;
transform-origin: 50% 50%;
transform: rotate(45deg);
z-index: -1;
}
<div>
<div class="bg"></div>
<p>Some Text</p>
</div>