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

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.