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

Question

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

我尝试过使用边框,但是我不能让实际的休息时间在中间,而不是右边或左边.

有没有办法在CSS中绘制对角线？正如你所看到的,我需要创建一个90px高的div,并在该div中有分割/对角线.然后我可以看一下添加图像,但主要问题是不知道CSS是否可行.

Answer 1

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

Answer 2

您可以在没有任何剪辑的情况下执行此操作,只需使用独特的边框.这也应该是跨浏览器兼容的,但我还没有对所有内容进行测试

最初将它划分为2个独立的div/triangle并加入它们,但感谢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>

使用多个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>

Answer 3

使用线性渐变

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

<div></div>

Answer 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