5

Quiero implementar un div con la forma que se encuentra en la siguiente imagen...

introducir la descripción de la imagen aquí

... pero quisiera realizarlo sin necesidad de imágenes, solo CSS. Estuve probando con clip-path, pero solo se pueden realizar líneas rectas o circunferencias. Utilicé pseudoclases como after y before pero no logro conseguir la forma correcta.

¿Cómo realizar esta forma en CSS, sin necesidad de imágenes?

La manera que he probado de realizar esta forma ha sido:

body {
  background-color: #F7F0D0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.inverted-border-radius {
  position: relative;
  height: 100px;
  width: 325px;
  background-color: #F66969;
  border-radius: 25px 25px 25px 0;
}

.inverted-border-radius::before {
  content: "";
  position: absolute;
  
  background-color: transparent;
  bottom: -50px;
  height: 50px;
  width: 25px;
  border-top-left-radius: 25px;
  box-shadow: 0 -25px 0 0 #F66969;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Border inverted</title>
</head>
<body>
    <div class = "inverted-border-radius"></div>
</body>
</html>

De esta manera consigo la curva superior derecha y la curva superior izquierda, la consigo dándole un border-radius en esa punta pero la inclinación aún no sé cómo hacerla. Con clip-path, la figura pierde el border-radius.

0

2 respuestas 2

4

Puedes jugar con las posiciones de los contenedores que elijas, div, span, etc en absoluto y relativo colocándolos como quieras y darle un background a dichos contenedores con el color que deban tener para posteriormente darles forma con por ejemplo "border-radius" y un width y height concretos, teniendo en cuenta que comenzará por la esquina superior izquierda del objeto describiendo un moviento como el de las agujas del reloj, quedando de este modo así en este ejemplo:

.forma{
    position:relative;
    top:2em;
    left:3em;
    width:5em;
    height:5em;
    border-radius: 10px 30px 15px 150px;
    background-color:#ccc;
    border:2px solid red;
}
<div class="forma">&nbsp;</div>

1

Pudieras intentarlo con la propiedad clip-path y creando un polígono de este modo:

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>Ejemplo</title>
      <style>
        .figura-rara {
          background-color: steelblue;
          height: 200px;
          clip-path: polygon(0% 30%, 100% 0%, 100% 100%, 0% 100%);
        }
      </style>
    </head>
    <body>
    <div class="figura-rara">
      
    </div>
    </body>
    </html>

Notas

  • Creamos con ayuda de un div un polígono que cumpla las siguientes reglas:

    • del extremo superior izquierdo separamos el polígono un 30%, para lograr la línea de pendiente
    • La siguiente pareja de valores nos ayudan a mantener la figura pegada a la esquina superior derecha
    • La siguiente pareja de valores la dejamos como 100% y 0% para lograr tenga mayor altura que su extremo contrario y no despegue de la esquina inferior derecha
    • La última pareja de porcentajes ayuda mantener la figura pegada a la esquina inferior izquierda

Nota: Aún no doy con la respuesta para generar el efecto de borde de las esquinas

4
  • En mi navegador se ve todo azul, sin forma. imgur.com/ZbUOb2L.png
    – user13558
    Commented el 30 nov. 2019 a las 1:30
  • @ArtEze que navegador usas? pues este código lo probé en Google Chrome y funciona
    – user128299
    Commented el 30 nov. 2019 a las 1:32
  • Estoy en Linux, con el navegador Luakit, no es muy buen navegador pero es el único que anda bien en mi compu.
    – user13558
    Commented el 30 nov. 2019 a las 1:34
  • 1
    Lo siento no tengo el gusto de conocer dicho navegador, igual aqui puedes revisar sobre el soporte a clip-path
    – user128299
    Commented el 30 nov. 2019 a las 1:36

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.