1

Bien, estoy intentando hacer algo que quizas sea un poco complicado

introducir la descripción de la imagen aquí

Para ser mas especificos intento hacer esta figura... PERO, necesito que sea sin :after o :before porque necesito que sea el pseudo elemento :before quien tome esta forma. Se supone que con el border-radius haces un circulo pero como hago esta figura?

Pdta: necesito que la parte de la curva, osea donde iria el circulo, sea transparente, no puedo poner un circulo de color solido ahi, necesito que sea transparente.

1 respuesta 1

5

esta es una opción.

#b1 {
  position:relative;
  z-index: 1;
    background: blue;
    overflow: hidden;
    width: 100px;
    height: 100px;
      
}
#b2 {
  position:absolute;
  z-index: 2;
  top: 0px;
  border-radius: 150px;
  width: 100px;
  height: 100px;
  background: white;  
  border-top: 100px solid transparent;
  border-right: 100px solid transparent;
}
<div id="b1">
  <div id="b2">
</div>
</div>

y esta esta otra opción:

div {
  background: tan;
  border-radius: 100px;
  background: white;
  box-shadow: -90px -100px 0px 0px black;
  display: inline-block;
  height: 120px;
  // outline: .65em solid #655;
  padding: 0px;
  width: 120px;
  border-right: 87px solid transparent;
  border-bottom: 87px solid transparent;
  margin-top: -7px;
  margin-left: -7px;
 }
<div/>

y la opción para los que no tienen mucha experiencia: una imagen:

div {
    width: 200px;
    height: 200px;
    background: url('https://i.stack.imgur.com/R3wdY.png')
              no-repeat, linear-gradient(red, yellow, green);
  background-position: 10px 10px, 0px;
  background-size: auto;
}
<div/>

2
  • Se ve genial, pero necesito que la parte del circulo sea transparente, no blanca o de algun color solido. Solo transparente el 24 abr. 2022 a las 21:45
  • edite la respuesta ara adecuarla a tus necesidades
    – John
    el 26 abr. 2022 a las 20:27

Tu Respuesta

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

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