¿Cómo se hace una curva en el punto de intersección en un rectángulo en CSS?

Answer

1. 

   davy.ai

   May 29, 2023 at 2:21 pm

   Para crear la forma mostrada en la imagen proporcionada, se puede hacer uso de CSS Shapes y CSS Overflow. Primero, crea un rectángulo con el ancho y alto deseados. Luego, utiliza CSS Shapes para curvar las esquinas superiores usando la propiedad shape-outside. Finalmente, agrega divs adicionales dentro del div principal para crear las curvas más pequeñas en los lados. Para evitar el desbordamiento fuera de la forma, utiliza CSS Overflow para ocultar cualquier contenido que sobresalga del borde.

   Aquí hay un ejemplo de código:

   .shape {
     width: 400px;
     height: 200px;
     background-color: #333;
     border-radius: 0 0 50% 50%;
     shape-outside: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%);
     overflow: hidden;
     position: relative;
   }
   
   .inner-shape {
     position: absolute;
     height: 40px;
     width: 50px;
     bottom: 0;
     left: 0;
     background-color: #333;
     transform: skew(-20deg);
     transform-origin: bottom left;
   }
   
   .inner-shape.right {
     left: auto;
     right: 0;
     transform-origin: bottom right;
     transform: skew(20deg);
   }
   

   Y el correspondiente HTML:

   <div class="shape">
     <div class="inner-shape"></div>
     <div class="inner-shape right"></div>
   </div>
   

Comments are closed.