使用css

Question

我想将div分成2个三角形（如下图所示，如果1是父级的背景则没有问题）上面一个用一种颜色而下面一个用另一种颜色。我不介意它是如何实现但我想在css（而不是javascript）中做到这一点。我尝试使用css旋转，（下面的代码），但它没有响应。在较小或较宽的屏幕中，它会变形。有什么办法在css中实现这个吗？

＆＃13;

＆＃13;

body {
  background: #eee;
}

.darker {
  position: fixed;
  top: -94%;
  left: -10%;
  width: 150%;
  height: 150%;
  background: #dd4f39;
  -webkit-transform: rotate(30deg);
          transform: rotate(30deg);
}

＆＃13;

<div class="darker">&nbsp;</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

这是一种做法。但是这个用例严格来说是关于vw的。只需确保为这些元素赋予相同的值

div和它的伪元素应分别具有相同的宽度和border-left。 div和它的伪元素应分别具有相同的高度和border-top。

＆＃13;

＆＃13;

nums = [max((nums[0], nums[-1]))] * len(nums)

＆＃13;

html, body {
  margin: 0;
}
div {
  width: 100vw;
  height: 100vh;
  background-color: white;
}
.box:after {
  content: ' ';
  border-top: 100vh solid #dd4f39;
  border-left: 100vw solid transparent;
  width: 0;
  position: absolute;
}

＆＃13;

＆＃13;

＆＃13;

JS小提琴 https://jsfiddle.net/kqsrmrss/2/

Answer 2

你可以使用偏斜的伪元素来做到这一点。主要技巧是保持纵横比相同，否则倾斜角度将失败

Fiddle demo

Stack snippet ^{Note 1}

body {
  background: #eee;
}
.darker {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding-top: 50%;
  background: #dd4f39;
  overflow: hidden;
}
.darker::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: gray;
  transform: skewY(26.5deg);
  transform-origin: left top;
}

<div class="darker"></div>

或者，您可以添加媒体查询以控制不同屏幕尺寸的角度

Fiddle demo 2

当窗口调整大小时运行一个小脚本，您可以控制角度并使其在水平和垂直方向上完全响应。

^注1 根据评论，Stack片段可能无法正常工作，如果，请尝试小提琴演示。

Answer 3

请使用此代码段。

＆＃13;

＆＃13;

div {
  width: 100%;
  height: 100px;
}

.diagonalRising {
  border: 1pt solid black;
  background: linear-gradient(to right bottom, #eeeeee 0%, #eeeeee 49.9%, #eeeeee 50%, #000000 51%, #dd4f39 51.1%, #dd4f39 100%);
}

.diagonalFalling {
  background: linear-gradient(to right top, #eeeeee 0%, #eeeeee 49.9%, #000000 50%, #000000 51%, #dd4f39 51.1%, #dd4f39 100%);
}

.diagonalCross {
  position: relative;
  background: linear-gradient(to right bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 49.9%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 1) 51%, rgba(0, 0, 0, 0) 51.1%, rgba(0, 0, 0, 0) 100%);
}

.diagonalCross:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  background: linear-gradient(to right top, #ffffff 0%, #ffffff 49.9%, #000000 50%, #000000 51%, #ffffff 51.1%, #ffffff 100%);
}

＆＃13;

<div class="diagonalRising"></div>
<div class="diagonalFalling"></div>
<div class="diagonalCross"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

我从here找到了一种有趣的方法，该方法使用clip-path  回答我自己的问题，以便每个人都可以使用。

html,
body {
  margin: 0;
}

body {
  background: #eee;
}

.box {
  width: 100vw;
  height: 100vh;
  background-color: #dd4f39;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

<div class="box"></div>

Answer 5

尝试一下，

.box::after {
    background:  #E52A35
    content: '';
    position: absolute;
    width: 100%;
    height: 100vh;
    background-color: #dd4f39;
    clip-path: polygon(52% 13%, 104% -1%, -1% 0%);
}