Julia Julia - 5 months ago 13
CSS Question

Transform skew causes 0.5px vertical shift in IE

I'm making a shape with skewed right side.

Here is the code:



h2 {
display: inline-block;
position: relative;
text-transform: uppercase;
background: #2b4450;
color: white;
font: bold 16.67px'Raleway', sans-serif;
padding: 0 35px;
height: 35px;
line-height: 35px;
cursor: pointer;
}
h2:before {
content: '';
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 34px;
transform-origin: right top;
transform: skew(30deg) translate3d(0, 0, 0);
background: inherit;
}

<h2>ALL CAMPAIGNS</h2>
<br/>
<br/>
<h2>ALL CAMPAIGNS</h2>
<br/>
<br/>
<h2>ALL CAMPAIGNS</h2>
<br/>
<br/>
<h2>ALL CAMPAIGNS</h2>





Looks good in Chrome and Firefox but not IE. In IE pseudo element is shifted about 0.5px up and sometimes 0.5px down and this is how it looks:

enter image description here

JSFiddle demo

Any suggestions?

Answer

If borders are an option: https://jsfiddle.net/3nmha5sf/9/

HTML

<h2>ALL CAMPAIGNS</h2>
<br/>
<br/>
<h2>ALL CAMPAIGNS</h2>
<br/>
<br/>
<h2>ALL CAMPAIGNS</h2>
<br/>
<br/>
<h2>ALL CAMPAIGNS</h2>

SCSS

h2 {
    display: inline-block;
    position: relative;
    text-transform: uppercase;
    background: #2b4450;
    color: white;
    font: bold 16.67px 'Raleway', sans-serif;
    padding: 0 35px;
    height: 35px;
    line-height: 35px;
    cursor: pointer;

    &:after {
        content: '';
        position: absolute;
        right: -20px;
        bottom: 0;
        width: 0;
        background: none;
        height: 0;
        border: solid transparent;
        border-bottom-color: #2b4450;
        border-width: 0 20px 35px;
    }   
}
Comments