Css 变换倾斜导致IE中的垂直偏移为0.5px

我正在做一个右边歪斜的形状

代码如下：

h2{
显示：内联块；
位置：相对位置；
文本转换：大写；
背景：#2b4450；
颜色：白色；
字体：粗体16.67px'ralway'，无衬线；
填充：0 35px；
高度：35px；
线高：35px；
光标：指针；
}
h2：之前{
内容：''；
位置：绝对位置；
右：0；
排名：0；
底部：0；
宽度：34px；
变换原点：右上角；
变换：倾斜（30度）平移3D（0,0,0）；
背景：继承；
}

所有活动




所有战役




所有战役




所有活动

如果选择边框：

HTML

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

---

边界是一种选择吗？喜欢顺便提一下哪个版本的IE？因为我在IE11中没有看到这种失真。@Seika85您的示例看起来不错，但在这种情况下，伪元素提供了额外的不可见可点击区域。我使用IE11（11.0.9600.17498）。我想我有两个选择，使用图片或保持原样，希望这种IE行为很少出现：）就是这样：没有额外的可点击区域。我将把它放在一个答案中…或者更简单：在我的IE中看起来不错，谢谢：）将作为一个想法，如果有其他方法的话，不使用转换

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;
    }   
}