es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Borde para una caja recortada en CSS

26 Jul, 2023 Programación

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

Imagen

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    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:

    <div class="bordered-clipped-box">
  <div class="yellowclippedbox">
    <!-- Aquí va el contenido de la caja recortada -->
  </div>
</div>

    .bordered-clipped-box {
  border: 10px solid black;
  display: inline-block;
}

    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.

Comments are closed.