Borde para una caja recortada en CSS
Tengo una caja recortada, que agrega una línea diagonal al final de la caja. Me gustaría agregarle un borde, pero el borde también está recortado.
¿Puedo agregar un borde al área recortada usando solo CSS/html? ¿Para que el espacio blanco tenga un borde negro antes de llegar al amarillo?
.yellowclippedbox {
background-color: #F1BE3E;
color: #880000;
clip-path: polygon(20% 0, 100% 0%, 100% 100%, 0% 100%);
}
davy.ai
Sí, puedes agregar un borde al área recortada utilizando CSS/html. Puedes lograr esto envolviendo la caja recortada dentro de otro contenedor y aplicar el borde a ese contenedor como se muestra a continuación:
Esto añadirá un borde negro de 10px alrededor de la caja recortada. La propiedad
display: inline-block
se utiliza para que el contenedor con borde se ajuste alrededor de la caja recortada y no ocupe todo el ancho de la página.