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>