1

quisiera saber como puedo hacer un trapecio circular en css, alguien me podria decir como hacerlo, solo tengo la base del trapecio normal, es este:

.trapecio
  width: $tamano * .8
  height: $tamano * .8
  border-left: transparent solid $tamano * .5
  border-right: transparent solid $tamano * .5
  border-bottom: $color4 solid $tamano
  border-top: transparent solid 0
  margin-top: -80px
  margin-left: 0
  margin-right: 0
  margin-bottom: 0

y un ejemplo del trapecio circular (la parte en azul):

introducir la descripción de la imagen aquí

1

1 respuesta 1

3

Recomiendo utilizar SVG en lugar de clip-path ya que el soporte en los navegadores es mucho mejor:

https://caniuse.com/#feat=css-clip-path

https://caniuse.com/#search=svg

Lo haría utilizando SVG de esta manera:

svg{border:1px solid}
<svg viewBox="-75 -145 130 55">
  
  <path id="trapecio_circular" d="M-70,-121.24
         A140,140 0 0 1 47.88,-131.557
         L37.622,-103.366
         A110,110 0 0 0 -55,-95.26
         L-70,-121.24"></path>
</svg>

Para entender como esta hecho a continuación viene una demo que incluye javascript y que muestra como calcular el valor del atributo d para el <path> Sabiendo como hay que hacerlo te da la posibilidad de cambiar los radios, y los ángulos a tu gusto, y cuando lo tengas a tu gusto puedes recuperar el código del inspector.

let R = 140,// el radio del circulo exterior
    r=110,//el radio del circulo interior
    a1 = -120 * Math.PI/180,//el angulo de partida
    a2 = -70 * Math.PI/180;//el angulo final

//las coordenadas de los puntos necesarios para dibujar el "trapecio"
let p1 = {
  x:R*Math.cos(a1),
  y:R*Math.sin(a1)
}
let p2 = {
  x:R*Math.cos(a2),
  y:R*Math.sin(a2)
}
let p3 = {
  x:r*Math.cos(a2),
  y:r*Math.sin(a2)
}
let p4 = {
  x:r*Math.cos(a1),
  y:r*Math.sin(a1)
}

// construye el valor del atributo d para el "trapecio"
let d = `M${p1.x},${p1.y}
         A${R},${R} 0 0 1 ${p2.x},${p2.y}
         L${p3.x},${p3.y}
         A${r},${r} 0 0 0 ${p4.x},${p4.y}
         L${p1.x},${p1.y}`

// establece el valor del attributo `d` del trapecio_circular
trapecio_circular.setAttributeNS(null,"d",d)
svg{border:1px solid}
circle{fill:none; stroke:black}
<svg viewBox="-150 -150 300 300">
  <circle r="140" /> 
  <circle r="110" />  
  <path id="trapecio_circular" />
</svg>

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.