Rincón inclinado en caja de CSS

He estado jugando con CSS por poco tiempo y estoy tratando de tener una caja normal, pero con la esquina superior izquierda cortada en un ángulo de 45 grados. No es una pequeña cantidad tampoco; Estoy viendo un corte de esquina bastante grande en ese ángulo. Este efecto:

http://tadesign.net/corner.jpg

¿Cómo debo hacerlo?

Descripciones

Slantastic ( http://meyerweb.com/eric/css/edge/slantastic/demo.html ) es compatible con navegadores antiguos. Para CSS3-specific, prueba CSS polígonos: http://alastairc.ac/2007/02/dissecting-css-polygons/ .

Código

El HTML:

 
Hello

El CSS:

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

El resultado: http://jsfiddle.net/mdQzH/

Código alternativo

Para usar bordes transparentes y texto en la sección de borde … El 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

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

El resultado: http://jsfiddle.net/76EUw/2

Esto se puede hacer usando svg clip-path .

Ventajas:

  1. Trabaja con un div regular
  2. Sin bordes hacky para crear formas
  3. No aplique ninguna rotación para que pueda hacerlo fácilmente en un fondo no uniforme
  4. No agrega ningún elemento div a través de CSS para que pueda seguir trabajando con el fondo div común (¡en caso de que tenga un código que lo modifique, por ejemplo!)

El siguiente CSS dará forma al div con la esquina inferior derecha cortada para que pueda poner cualquier fondo:

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

Hay múltiples generadores SVG en línea:

En un futuro cercano, puede lograr esto con el Módulo de formas CSS .

Con la propiedad shape-inside la shape-inside , podemos hacer que el texto fluya de acuerdo con la forma.

La forma que proporcionamos puede ser de inserción (), círculo (), elipse () o polígono ().

Esto se puede hacer actualmente en los navegadores webkit, pero primero debe hacer lo siguiente: (instrucciones de la plataforma web )

Para habilitar Shapes, Regions y Blend Modes:

1) Copie y pegue opera: // flags / # enable-experimental-web-platform-features en la barra de direcciones, luego presione enter.

2) Haga clic en el enlace ‘Habilitar’ dentro de esa sección.

3) Haga clic en el botón ‘Relanzar ahora’ en la parte inferior de la ventana del navegador.

Si has hecho eso, entonces mira esta FIDDLE

que se ve así:

enter image description here

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

Para construir la forma del polígono, utilicé este sitio

Puede encontrar más información sobre las diversas propiedades compatibles aquí

CSS3 linear-gradient() puede dibujar este fondo.

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

Se me ocurrió una solución amigable de respuesta del violín de Ray Toal: http://jsfiddle.net/duk3/hCaXv/

El 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

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

Espero eso ayude !

He logrado hacer algo muy similar utilizando solo tramos adicionales y el efecto se realiza a través de CSS.

jsPara ilustrar.

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

He incluido un estilo de vuelo desencadenado por el padre. El ‘border-right: 15px solid # 4d4c51;’ el color es el que debe ser diferente del color de fondo del anclaje principal para crear el contraste diagonal / angular.