使用CSS创建对角线/剖面/边框

我试图在网页上创建一条对角线，作为一个剖面/剖面分隔符。这基本上是一个分色部分。我不能像页面放大一样使用图像，图像将像素化。所以我需要能够直接在div的底部画一条对角线，如下图所示

我试过使用边框，但是我不能把实际的断点放在中间，而不是右边或左手边。 有没有办法在CSS中画对角线？如您所见，我需要创建一个90像素高的div，并在该div中添加分割/对角线。然后我可以查看添加图像，但主要问题是不知道这是否适用于CSS

使用线性渐变

div{
高度：90px；
背景图像：线性渐变（右下角，黄色，黄色50%，黑色50%，黑色）；
}

---

您可以使用渐变进行此操作

body {
  height: 200px;
  margin: 0 0 20px 0;
  background-color: transparent;
  background-size: 20px 20px;
  background-image:
     -webkit-repeating-linear-gradient(-45deg, black, black 1px, transparent 1px, transparent 14px);
  background-image:
     -moz-repeating-linear-gradient(-45deg, black, black 1px, transparent 1px, transparent 14px);
  background-image:
     -o-repeating-linear-gradient(-45deg, black, black 1px, transparent 1px, transparent 14px);
  background-image:
     repeating-linear-gradient(-45deg, black, black 1px, transparent 1px, transparent 14px);
}

---

您可以使用CSS3

clip

：

.yellow{
宽度：100%；
高度：90px；
背景：黄色；
-webkit剪辑路径：多边形（100%0,0,0 100%）；
剪辑路径：多边形（100%0,0,0 100%）；
}
布莱克先生{
宽度：100%；
高度：90px；
背景：黑色；
-webkit剪辑路径：多边形（100%0,0100,100%99%）；
剪辑路径：多边形（100%0,0100,100%99%）；
利润上限：-90px；
}

---

您无需进行任何剪裁，只需以独特的方式使用边框即可完成此操作。这也应该是跨浏览器兼容的，但我还没有测试过它的所有功能

最初将其划分为两个独立的div/三角形并将其连接起来，但由于

webtiki

和

kaido

的完善，它只使用了一个div和最小的CSS

*{
边界：0；
填充：0；
保证金：0；
}
#梯度{
宽度：0；
身高：0；
边框样式：实心；
边框宽度：90px 100vw 0；
边框颜色：黄黑透明；
变换：比例（1.0001）；
}

---

使用svg，它非常简单：

svg{
显示：块；
宽度：100%；
高度：90px；
背景：黄色；
}

---

如果您想在列中添加对角线边框，您可以这样做，并且100%响应。不过，您的要求可能会有所不同。我把它的透明图像，其中包含白色的对角线边框在该部分的右栏

<div id="wrapper">
  <div class="h-row">
    <div class="h-left">
    </div>
    <div class="h-right">
      <div class="hr-box"></div>
    </div>
  </div>
</div>

<style>
.h-row{display: table; table-layout: fixed; height: 100%; width: 100%;}
.h-left,
.h-right{display: table-cell; vertical-align: top; height:250px;}/*height is just for demo purpose you can remove it ofcourse and fill the content */ 
.h-left{background: #e9eae2; padding: 50px 83px 15px 165px; width: 69%;}
.h-right{background: #7acec3 url('https://previews.dropbox.com/p/thumb/AAMv9WREPIx2AXUVhzCrK5Hl1jxf3ofX0teck9P94bG_SCjB28QPmKqXuchYyjp_xFMjMrGLzRYHh0O9wBOZJMZW9L_97lScKB22dgco9eGMJ1PCBbFepUcDkPg3aUE_1ONik2rKQ2SgRvtUgdq8nA_Ev1gxLxq8yWcXNKOdxKGBNOqe4FTHnbAgGy-JD4UtwZliw8c0fmNah8rydlD4JetFxNubkUyW4I_Q-XRL5qjW9A/p.png?size=1280x960&size_mode=3') no-repeat center center/ 100% 100%; padding: 50px 165px 15px 0; width: 31%; position: relative;}
.h-left .row{margin:0 -44px;}
</style>

.h行{显示：表格；表格布局：固定；高度：100%；宽度：100%；}
.h-左，
.h-right{display:table cell；vertical align:top；height:250px；}/*height仅用于演示目的，您当然可以删除它并填充内容*/
.h-左{背景：e9eae2；填充：50px 83px 15px 165px；宽度：69%；}
.h-右{背景：#7acec3url（'https://previews.dropbox.com/p/thumb/AAMv9WREPIx2AXUVhzCrK5Hl1jxf3ofX0teck9P94bG_SCjB28QPmKqXuchYyjp_xFMjMrGLzRYHh0O9wBOZJMZW9L_97lScKB22dgco9eGMJ1PCBbFepUcDkPg3aUE_1ONik2rKQ2SgRvtUgdq8nA_Ev1gxLxq8yWcXNKOdxKGBNOqe4FTHnbAgGy-JD4UtwZliw8c0fmNah8rydlD4JetFxNubkUyW4I_Q-XRL5qjW9A/p.png?size=1280x960&size_mode=3')无重复中心/100%100%；填充：50px 165px 15px 0；宽度：31%；位置：相对；}
.h-left.行{边距：0-44px；}

---

只有一个div就足够了，为什么还要使用三个div？我想在@webtiki中添加一个

transform:scale（1.0001）

要去掉这个脆边：@webtiki哦，是的-很好。出于某种原因，我没有想到这一点——相反，我是从连接两个三角形的角度来考虑的。我这样做了，线条看起来真的很参差不齐。@DomGreensladeBSc您添加了

变换：比例（1.001）

？如果你这样做了，那么你可以使用我的原始答案，它能更好地去除锯齿。“我不能像页面放大一样使用图像，图像将像素化”–那么您从未听说过SVG…？感谢您的建设性和帮助comment@DomGreensladeBSc这适用于最新的FF，根据canIuse的说法，它也适用于更旧的版本。你能详细解释一下吗？对不起，有完全不同的东西。如果我想颠倒这个怎么办？就多边形而言，即。我已经更新了主要问题的图像，我试图画一个多边形，但看不出它是如何工作的。@DomGreensladeBSc最简单的方法是像这样反转颜色对不起，我的意思是现在几乎像问题中的图像一样反转多边形。@DomGreensladeBSc如果你想让它像你在问题中编辑的图像一样，请看这个