I'm attempting to create a trapezoid shape using CSS to contain a link, but it doesn't seem to be functioning correctly. I'm unsure if it's due to lack of support or if there's an issue with the code itself. It looks like it should be working! Does anyone have any insight on what might be causing this issue?
Just to clarify, the trapezoid shape itself works, but the link inside the shape is unresponsive.
Below is the code snippet I'm using:
.box {
width: 180px;
height: 70px;
position: relative;
padding: 0px;
left: 10%;
text-transform: uppercase;
text-align: center;
padding-top: 34px;
padding-bottom: 10px;
}
.box:before {
content: "";
position: absolute;
border-radius: 1px;
box-shadow: 0 1px 0 3px #27628e;
top: -5%;
bottom: -11%;
left: -1%;
right: -5%;
z-index: ;
-webkit-transform: perspective(50em) rotateX(-50deg);
transform: perspective(50em) rotateX(-50deg);
}<div class="box"><a href="http://google.com">google.com</a>
</div>