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

＆＃13;

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

＆＃13;

你的意思是？

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代码，它运行正常。

＆＃13;

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

＆＃13;

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

＆＃13;

使用CSS

3 个答案: