Is there a way to create tilted drivers with borders and text without sacrificing the sharpness of the font and border? I have used the transform: skew(); CSS rule for tilting, but it has caused blurriness. How can I add font smoothing and maintain sharp borders on these elements?
I want these drivers to span the full width of the browser without any white space after tilting.
CSS -
.flex-inline{
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.driver-wrap{
overflow: hidden;
margin-bottom: 75px;
}
.driver{
flex: 1;
background-color: #fff;
min-height: 250px;
position: relative;
transform: skew(-15deg, 0deg);
-webkit-backface-visibility: hidden;
overflow: hidden;
cursor: pointer;
}
.content{
background-image: url('https://i.imgur.com/oKWAofK.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
position: absolute;
top: 0;
left: -50px;
right: -50px;
bottom: 0;
transform: skew(15deg, 0deg);
}
.text{
position: absolute;
bottom: 10px;
left: 75px;
width: 70%;
transform: rotate(360deg);
}
h2{
font-family: $heading;
font-size: 28px;
color: #fff;
margin: 0px 0px;
text-transform: capitalize;
}
p{
color: #fff;
font-size: 18px;
margin-top: 5px;
}
.driver:nth-child(1){
margin-left: -50px;
border-right: 20px solid #fdcb6e;
}
.driver:nth-child(2){
border-right: 20px solid #e84393;
}
HTML -
<div class="driver-wrap flex-inline">
<div class="driver">
<div class="content">
<div class="text">
<h2>Building training</h2>
<p>lorem ipsum text here</p>
</div>
</div>
</div>
<div class="driver">
<div class="content">
<div class="text">
<h2>Building training</h2>
<p>lorem ipsum text here</p>
</div>
</div>
</div>
<div class="driver">
<div class="content">
<div class="text">
<h2>Building training</h2>
<p>lorem ipsum text here</p>
</div>
</div>
</div>
</div>
JSFiddle - https://jsfiddle.net/zhhpm02y/10/