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

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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