使用 CSS 创建对角线/部分/边框答案

【问题标题】：Creating a diagonal line/section/border with CSS使用 CSS 创建对角线/部分/边框
【发布时间】：2015-05-14 23:08:11
【问题描述】：

我正在尝试在网页上创建一条对角线，以充当节/分节符。这本质上是一个分色部分。我不能使用图像，好像页面被放大了，图像会像素化。所以我需要能够直接在 div 的底部绘制一条对角线，如下图所示。

我尝试过使用边框，但是我无法让实际的中断位于中间，而不是右侧或左侧。

有没有办法在 CSS 中绘制对角线？如您所见，我需要创建一个 90px 高的 div 并在该 div 中有分割/对角线。然后我可以看看添加图像，但主要问题是不知道这是否可以使用 CSS。

【问题讨论】：

“我不能使用图像，因为页面被放大了，图像会像素化”——所以你从没听说过 SVG……？
感谢您的建设性和帮助性评论

标签： css svg responsive-design css-shapes

【解决方案1】：

如果您想在列中放置对角线边框，您可以这样做并且它 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>

https://codepen.io/neel555nc/pen/LgjoOg

【讨论】：

【解决方案2】：

您可以在没有任何剪裁的情况下执行此操作，只需以独特的方式使用边框即可。这也应该是跨浏览器兼容的，但我还没有在所有方面都测试过

最初将它分成 2 个单独的 div / 三角形并加入它们，但感谢 web-tiki 和 kaiido 完善它只使用 1 个 div 和最少的 CSS

*{
  border: 0;
  padding: 0;
  margin: 0;
}

#gradient {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 90px 100vw 0 0;
  border-color: yellow black transparent transparent;
  transform: scale(1.0001);
}

&lt;div id="gradient"&gt;&lt;/div&gt;

使用多个 div 的原始答案：

*{
  border: 0;
  padding: 0;
  margin: 0;
}

#container {
  width: 100%;
  position: relative;
}

#container div {
  position: absolute;
}

#top-triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 90px 100vw 0 0;
  border-color: yellow transparent transparent transparent;
}

#bottom-triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 90px 100vw;
  border-color: transparent transparent black transparent;
}

<div id="container">
  <div id="top-triangle"></div>
  <div id="bottom-triangle"></div>
</div>

【讨论】：

只有一个就够了，为什么还要使用三个 div？ jsfiddle.net/webtiki/jLa8sfp7
我想添加到@web-tiki 你也可以添加一个transform: scale(1.0001);来删除那个脆边：jsfiddle.net/jLa8sfp7/3
@web-tiki 哦，是的 - 好点。出于某种原因，我只是没有考虑这一点 - 相反，我是从连接 2 个三角形的角度考虑的。
我这样做了，这条线看起来真的很锯齿。
@DomGreensladeBSc 你添加了transform: scale(1.001) 吗？如果你这样做了，那么你可以使用我原来的答案，它可以更好地消除锯齿。

【解决方案3】：

使用 svg 非常简单：

svg {
  display: block;
  width: 100%;
  height: 90px;
  background: yellow;
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 10" preserveAspectRatio="none">
  <polygon points="100 0 100 10 0 10" />
</svg>

请注意，我使用了 preserveAspectRatio="none" 属性，以便形状可以有 100% 的宽度并保持 90px 的高度

这里有一张猴子图片：

div {
  position: relative;
}
svg {
  display: block;
  width: 100%;
  height: 90px;
  background: yellow;
}
img {
  height: 50px;
  position: absolute;
  top: 0; bottom: 0;
  left: 0; right: 0;
  margin: auto;
  background: #fff;
  border-radius: 50%;
  padding: 10px;
}

<div>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 10" preserveAspectRatio="none">
    <polygon points="100 0 100 10 0 10" />
  </svg>
  <img src="http://images.clipartpanda.com/monkey-clipart-black-and-white-16981-monkey-face-svg.svg" alt="" />
</div>

【讨论】：

@DomGreensladeBSc 这适用于最新的 FF，根据 canIuse 的说法，它也应该适用于更旧的版本。能详细点吗？
对不起，完全不同的事情。如果我想反转这个怎么办？就多边形而言。我已经更新了主要问题的图像，我试图绘制一个多边形，但看不到它是如何工作的。
@DomGreensladeBSc 最简单的方法是像这样反转颜色jsfiddle.net/webtiki/3ku7npf8
对不起，我的意思是几乎像现在问题中的图像那样反转多边形。
@DomGreensladeBSc 如果您希望它像您在问题中编辑的图像一样，请参阅jsfiddle.net/webtiki/3ku7npf8/1

【解决方案4】：

你可以使用 CSS3 clip:

.yellow {
  width: 100%;
  height: 90px;
  background: yellow;
  -webkit-clip-path: polygon(100% 0, 0 0, 0 100%);
  clip-path: polygon(100% 0, 0 0, 0 100%);
}
.black {
  width: 100%;
  height: 90px;
  background: black;
  -webkit-clip-path: polygon(100% 0, 0 100%, 100% 99%);
  clip-path: polygon(100% 0, 0 100%, 100% 99%);
  margin-top: -90px;
}

<div class="yellow"></div>
<div class="black"></div>

演示：http://jsfiddle.net/zLkrfeev/2/

浏览器不广泛支持：http://caniuse.com/#feat=css-clip-path

【讨论】：

【解决方案5】：

您可以使用渐变来做到这一点。

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

JSFiddle

【讨论】：

【解决方案6】：

使用线性渐变

div {
  height: 90px;
  background-image: linear-gradient(to bottom right, yellow, yellow 50%, black 50%, black);
}

&lt;div&gt;&lt;/div&gt;

【讨论】：