Transparent trapezoidal buttons with border and centered text - html

Question

I'm designing a site where trapezoids are crucial. I'm using the following code to achieve the effect I'm looking for, but am having issues with it: http://jsfiddle.net/9n9uh6f6/9/
The biggest problems are the mouseover area (because I'm using perspective transforms, the clickable area is skewed) and centering text within the shape.
Other than using perspective transforms, how can I make a shape that does the following:
Trapezoid with a colored border and transparent interior.
Trapezoid that can change color when a user hovers over it.
Trapezoid that houses text in the center of the shape.
Here's the CSS I'm using:
.prodcaptions {
width:136px;
height: 85px;
position:relative;
left:10%;
text-transform:uppercase;
text-align:center;
letter-spacing: 1.6px;
color: #000;
}
.prodcaptions:before {
content:"";
position:absolute;
border-radius:1px;
box-shadow:0 0 0 3px #27628e;
top:-5%;
bottom:-11%;
left:-1%;
right:-5%;
-webkit-transform:perspective(40em) rotateX(-45deg);
transform:perspective(40em) rotateX(-45deg);
}
.prodcaptions a {
z-index:999;
position:relative;
height: 85px;
display: block;
padding-top: 25px;
}

Answer 1

For this case, it would be better to use a skew transform to produce the shape than a rotation with perspective.
We can achieve the shape by using two pseudo-elements skewed in opposite directions and then position one at the left corner and the other at the right corner. Since only the pseudo-elements are skewed and not the main container, the text remains in its expected place (at center-middle).
This shape can (a) support dynamic width (b) have a colored border with transparent background (c) have the text in the center of the shape and (d) support change of background color when hovered on.
.trapezoid {
display: inline-block;
position: relative;
height: 100px;
width: auto;
color: #27628e;
border-top: 2px solid #27628e;
border-bottom: 2px solid #27628e;
line-height: 100px;
text-align: center;
white-space: nowrap;
text-transform: uppercase;
letter-spacing: 1.6px;
margin: 15px 250px; /* Just for demo */
}
.trapezoid:after,
.trapezoid:before {
position: absolute;
content: '';
top: -2px;
height: 100%;
width: 50%;
z-index: -1;
}
.trapezoid:before {
left: 0px;
border-left: 2px solid #27628e;
border-top: 2px solid #27628e;
transform-origin: left bottom;
transform: skew(10deg);
}
.trapezoid:after {
right: 0px;
border-right: 2px solid #27628e;
border-top: 2px solid #27628e;
transform-origin: right bottom;
transform: skew(-10deg);
}
.trapezoid:hover,
.trapezoid:hover:after,
.trapezoid:hover:before {
background: #27628e;
color: white;
}
/* Just for demo */
body {
background: linear-gradient(90deg, aliceblue, powderblue);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
Click Me!!!
You could also create the same shape using SVG and the angled sides look a tad more smoother while using SVG. The below snippet currently works only for a fixed size container. It should not be an issue as the code in question also has fixed dimensions.
.vector {
position: relative;
height: 100px;
width: -webkit-calc(100px * 1.36);
width: calc(100px * 1.36);
line-height: 100px;
margin: 0px auto; /* Just for demo */
}
svg {
height: 100%;
width: 100%:
}
polygon {
fill: transparent;
stroke-width: 2;
stroke: steelblue;
}
.vector a {
position: absolute;
display: block;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1.6px;
color: steelblue;
text-align: center;
white-space: nowrap;
}
.vector:hover polygon {
fill: steelblue;
}
.vector:hover a {
color: white;
}
/* Just for demo */
body{
background: linear-gradient(90deg, aliceblue, powderblue);
}
<div class='vector'>
<svg viewBox='0 0 136 100' preserveaspectratio='none'>
<polygon points='1,2 18,98 118,98 135,2' />
</svg>
<a href='#'>Click Me!!!</a>
</div>