Cortar esquinas usando CSS
Estoy buscando "cortar" la esquina superior izquierda de un div, como si hubieras doblado la esquina de una página hacia abajo.
Me gustaría hacerlo en CSS puro, ¿hay algún método?
Si el elemento principal tiene un fondo de color sólido, puedes 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: Lo próximoborder-corner-shape es exactamente lo que estás buscando. Lástima que se elimine de la especificación y nunca llegue a ningún navegador disponible :(
Ruta de clip CSS
Usar una ruta de clip es una alternativa nueva y prometedora. Está empezando a recibir cada vez más apoyo y ahora está bien documentado. Dado que utiliza SVG para crear la forma, responde 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>
Si necesita un borde recortado transparente , puede utilizar un pseudoelemento girado como fondo divy colocarlo 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 superior, transformación y origen de transformación del pseudoelemento a:
Mostrar fragmento de código
Aquí hay otro enfoque que utiliza CSS transform: skew(45deg)para producir el efecto de esquina cortada. La forma en sí involucra tres elementos (1 real y 2 pseudoelementos) de la siguiente manera:
divEl elemento contenedor principal tieneoverflow: hiddeny produce el borde izquierdo.- El
:beforepseudoelemento que tiene el 20 % de la altura del contenedor principal y al que se le ha aplicado una transformación sesgada. Este elemento produce el borde en la parte superior y el borde cortado (inclinado) en el lado derecho. - El
:afterpseudoelemento que tiene el 80% de la altura del padre (básicamente, la altura restante) y produce el borde inferior, la parte restante del borde derecho.
El resultado producido responde, produce un corte transparente en la parte superior y admite fondos transparentes.
Mostrar fragmento de código
El siguiente es otro método para producir el efecto de esquina cortada utilizando linear-gradientimágenes de fondo. Se utiliza una combinación de 3 imágenes de degradado (que se muestran a continuación):
- Un degradado lineal (en ángulo hacia la parte inferior izquierda) para producir el efecto de esquina cortada. Este degradado tiene un tamaño fijo de 25 px x 25 px.
- Un degradado lineal para proporcionar un color sólido a la izquierda del triángulo que provoca el efecto de corte. Se utiliza un degradado aunque produzca un color sólido porque podemos controlar el tamaño y la posición del fondo sólo cuando se utilizan imágenes o degradados. Este degradado se coloca a -25 px en el eje X (básicamente, lo que significa que terminaría antes del lugar donde está presente el corte).
- Otro degradado similar al anterior que nuevamente produce un color sólido pero está ubicado a 25 px hacia abajo en el eje Y (nuevamente para omitir el área de corte).
El resultado producido responde, produce un corte transparente y no requiere ningún elemento adicional (real o pseudo). El inconveniente es que este enfoque funcionaría sólo cuando el fondo (relleno) es de un color sólido y es muy difícil producir bordes (pero aún es posible, como se ve en el fragmento).
Mostrar fragmento de código
