I have managed to create a trapezoid in css but using border
and when I add box shadow it does not apply well to me, is there a simple way to make a trapezoid and that can be given box-shadow? There is also the fact that the text by giving it absolute no longer focuses on me alone
.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>
I mean this, you have to create a container, put your normal trapezoid where you want it and put it in absolute position, then create another one and put it below it to be the shadow.