使用 CSS 创建对角线/部分/边框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29015781/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Creating a diagonal line/section/border with CSS
提问by Dom Greenslade BSc
I am trying to create a diagonal line on a webpage, to act as a section/section break. This is essentially a split colour section. I cant use an image as if the page gets enlarged, the image is going to pixelate. So i need to be able to draw a diagonal line directly at the bottom of the div, like the image below.
我试图在网页上创建一条对角线，作为分节/分节符。这本质上是一个分色部分。我不能使用图像，好像页面被放大一样，图像会像素化。所以我需要能够直接在div的底部绘制一条对角线，如下图所示。
I have tried using a border, however i cannot get the actual break to be in the middle, rather than the right or left hand side.
我试过使用边框，但是我无法将实际中断点放在中间，而不是右侧或左侧。
Is there a way to draw diagonal lines in CSS? As you can see, i need to create a div that is 90px high and have the split/diagonal line in that div. I can then have a look at adding the image, but the main issue is not knowing whether this is possible with CSS.
有没有办法在 CSS 中绘制对角线？如您所见，我需要创建一个 90 像素高的 div，并在该 div 中设置分割线/对角线。然后我可以看看添加图像，但主要问题是不知道这是否可以使用 CSS。
回答by web-tiki
With an svg, it is pretty simple :
使用 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>Note that I used the preserveAspectRatio="none"attribute so that the shape can have 100% width and keep 90px height
请注意，我使用了该preserveAspectRatio="none"属性，以便形状可以具有 100% 的宽度并保持 90px 的高度
And here with a monkey image :
这里有一个猴子图像：
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>回答by Adjit
You can do this without any clipping and just using borders in a unique way. This should also be cross-browser compatible, but I haven't tested it across everything
您可以在不进行任何剪辑的情况下完成此操作，只需以独特的方式使用边框即可。这也应该是跨浏览器兼容的，但我还没有对所有内容进行测试
Initially divided this into 2 separate divs / triangles and joined them, but thanks to web-tikiand kaiidoperfected it to use only 1 div and minimal CSS
最初将其分为 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);
}<div id="gradient"></div>Original Answer using multiple divs:
使用多个 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>回答by Paulie_D
Use a linear gradient
使用线性渐变
div {
height: 90px;
background-image: linear-gradient(to bottom right, yellow, yellow 50%, black 50%, black);
}<div></div>回答by Ivanka Todorova
You can use CSS3 clip:
您可以使用 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>Demo: http://jsfiddle.net/zLkrfeev/2/
演示：http: //jsfiddle.net/zLkrfeev/2/
It's not widely supported by the browsers: http://caniuse.com/#feat=css-clip-path
它没有被浏览器广泛支持：http: //caniuse.com/#feat=css-clip-path
回答by confusedGuy
if you want to put diagonal border in column you can do it this way and its 100% responsive. your requirement might be different though. I put it transparent image which contains white diagonal border in that section's right column.
如果你想把对角线边框放在列中，你可以这样做，并且它 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>
回答by knocked loose
You can do this using a gradient.
您可以使用渐变来做到这一点。
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);
}
