在CSS中使用背景色创建对角线顶部

Question

我想在背景色为绿色的框顶部创建对角线，如下例所示。我应该使用哪个CSS来执行此操作？

Diagonal line on top of green background color

我设法与此代码做到这一点：

.quote { 
    background: #41ade5; 
    color: #fff; 
    position: relative; 
    z-index: 1; 
} 
.quote:before { 
    background: inherit; 
    bottom: 0 !important; 
    content: '' !important; 
    display: block !important; 
    height: 50% !important; 
    left: 0 !important; 
    position: absolute !important; 
    right: 0 !important; 
    transform: skewY(1.5deg) !important; 
    transform-origin: 100% 0 !important; 
    z-index: -1 !important; 
    top: 0; 
}` 

但随后的对角线得到了很多的边缘，而不是尖锐的。显示在下面的图片：

Diagonal line with edges

是否有人在做对角线是比较干净的任何良好的CSS技巧？

Answer 1

<div style="width: 300px; height: 300px; border: solid 1px black; position: relative; overflow: hidden;"> 
 
    <div style="width: 400px; height: 100px; background: green; margin-bottom: 200px; transform: rotate(174deg); position: absolute; left: -77px; top: -15px; "> 
 

 
    </div> 
 
</div>

您是不是要找这样？

Answer 2

这是否适合你？我刚刚添加-webkit-backface-visibility: hidden;，据知这有助于减少锯齿。不过，我认为这个解决方案只有在没有应用抗锯齿的情况下。这可能与浏览器反锯齿一样好。

body { 
 
background:#000; 
 
} 
 
.quote { 
 
    background: #41ade5; 
 
    color: #fff; 
 
    position: relative; 
 
    z-index: 1; 
 
    height:100px; 
 
    margin-top:50px; 
 
} 
 
.quote:before { 
 
    background: inherit; 
 
    bottom: 0; 
 
    content: ''; 
 
    display: block; 
 
    height: 50%; 
 
    left: 0; 
 
    position: absolute; 
 
    right: 0; 
 
    transform: rotate(1.5deg); 
 
    transform-origin: 100% 0; 
 
    z-index: -1; 
 
    top: 0; 
 
    -webkit-backface-visibility: hidden; 
 
}

<div class="quote"></div>

Answer 3

如果绘制的图像将采取边缘锐化和CSS，但没有。

下面是你的CSS代码，它工作正常。

.quote { 
 
    background: #41ade5; 
 
    color: #fff; 
 
    position: relative; 
 
    z-index: 1; 
 
    width: 300px; 
 
    height: 100px; 
 
    position: relative; 
 
} 
 

 
.quote:before { 
 
    background: black; 
 
    bottom: 0 !important; 
 
    content: '' !important; 
 
    display: block !important; 
 
    height: 50% !important; 
 
    left: 0 !important; 
 
    position: absolute !important; 
 
    right: 0 !important; 
 
    transform: skewY(1.5deg) !important; 
 
    transform-origin: 100% 0 !important; 
 
    z-index: -1 !important; 
 
    top: 0; 
 
}

<div class="quote"></div>