0

he conseguido crear un trapecio en css pero usando border y cuando le añado box shadow no se me aplica bien, hay alguna manera sencilla de hacer un trapezio y que se le pueda dar box-shadow? Tambien esta el hecho de que el texto al darle absolute ya no se me centra solo

.trapezoider {
    color: white;
    text-align: center;
    align-items: center;
    width: 60%;
    height: 0px;
    margin: auto;
    border-right: 3em solid transparent;
    border-left: 3em solid transparent;
    border-top: 3em solid rgba(0,0,0);
    position: relative;
    box-shadow: 1px 1px 4px 1px rgba(3, 1, 32, 0.3);
}




#bronze{
    color:rgba(176,141,87);
    position: absolute;
    bottom: 1em;
    margin: auto;
    padding: auto;
    width: fit-content;
    right: 1em;
    text-align: center;
    
}
<div class="trapezoider">
   <span id="bronze">Bronce</span>
</div>

2
  • Creando toro trapecio por debajo si le haces el box-shadow no te lo aplica a la transofrmacion que le has echo al div. Commented el 2 may. 2022 a las 7:39
  • no entiendo bien lo que me quieres decir
    – FranyxD
    Commented el 2 may. 2022 a las 7:40

1 respuesta 1

1

Me refiero a esto, tienes que crear un contenedor, poner tu trapezoide normal donde lo quieres y lo pones en posición absolute, después creas otro igual y lo pones debajo para que sea la sombra.

.contenedortrapezoider{
  position : relative;
}

.sombratrapezoider{
    width: 600px;
    height: 0px;
    border-right: 3em solid transparent;
    border-left: 3em solid transparent;
    border-top: 3em solid rgb(60, 60, 60);
    position: absolute;
    z-index: 2;
    margin-top: 5px;
    margin-left:5px;
    opacity:.5;
    filter: blur(2px)
}

.trapezoider {
    color: white;
    text-align: center;
    align-items: center;
    width: 600px;
    height: 0px;
    margin: auto;
    border-right: 3em solid transparent;
    border-left: 3em solid transparent;
    border-top: 3em solid rgba(0,0,0);
    position: absolute;
    z-index: 4;
    margin-top:0px;
}




#bronze{
    color:rgba(176,141,87);
    position: absolute;
    bottom: 1em;
    margin: auto;
    padding: auto;
    width: fit-content;
    right: 1em;
    text-align: center;
    
}
<div class="contenedortrapezoider">
  <div class="sombratrapezoider"></div>
  <div class="trapezoider">
     <span id="bronze">Bronce</span>
  </div>
</div>

2
  • Wua esta es como la forma manual de hacerla no? Porque no hay ninguna manera de hacerle con box shadow o algo asi no? modificando solo la caja en vez de los bordes? los svg tambiene tienen forma caja o?
    – FranyxD
    Commented el 2 may. 2022 a las 8:24
  • 1
    Esque estas transformando los borders del div pero el div siempre es una caja por lo tanto a la que pones el box-shadow te lo ara siempre en la caja Commented el 2 may. 2022 a las 9:14

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.