Question

我正在尝试向this

取得类似的结果

优选地，黑色和蓝色部分是单独的div，因为我想要实现的将是非常难/不可能的。 HTML代码看起来像

<div class="diagonal">
    <div class="diagonal-black"></div>
    <div class="diagonal-blue"></div>
</div>

谢谢，

的Bram

Answer 1

在伪元素上使用边框：

＆＃13;

<div class="diagonal">
    <div class="diagonal-black"><img src="https://placekitten.com/350/200" alt="" /></div>
    <div class="diagonal-blue"></div>
</div>

＆＃13;

{{1}}

＆＃13;

Answer 2

我认为最常用的方法是使用剪辑路径。另一种方法是使用边框。两者都有教程。以下是如何使您的示例正常工作的示例

DEMO

.diagonal {
  height: 500px;
  width: 500px;
  background: blue;
}
.diagonal-black {
  background: black;
  width: 100%;
  height: 100%;
-webkit-clip-path: polygon(74% 0, 100% 0, 100% 100%, 0% 100%);
clip-path: polygon(74% 0, 100% 0, 100% 100%, 0% 100%);
}

这是一个用于轻松生成首选形状和角度的网站Clippy

Answer 3

这样的事情怎么样？

<div class='diagonal'></div>

<style>
.diagonal {
  position: relative;
  width: 100%;
  height: 300px;
  background-color: black;
  overflow: hidden;
}

.diagonal::after {
  content: '';
  position: absolute;
  left: 50%;
  width: 100%;
  height: 200%;
  background-color: blue;
  -webkit-transform: skewX(45deg) translateX(-50%);
  -moz-transform: skewX(45deg) translateX(-50%);
  -ms-transform: skewX(45deg) translateX(-50%);
  -o-transform: skewX(45deg) translateX(-50%);
  transform: skewX(45deg) translateX(-50%);
}
</style>

基本上，这样您只需调整transform，width和/或height即可获得所需的确切位置。

jsbin example

具有图像

3 个答案: