Question

我希望蓝色div填充屏幕的右侧。鉴于div已旋转，除非我将宽度和高度设置为1000％，否则在大屏幕上将出现顶角。我必须处理非常大的屏幕。

不在其中插入高值的解决方案是什么？谢谢！

<div class="modal" id="fruit-info">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h2>{{ foodController.activeFruit.title }}</h2>
      </div>
    </div>
  </div>
</div>

.background {
  background: blue;
  width: 100%;
  height: 100%;
  transform: rotate(-10deg);
}

.right {
  position: absolute;
  right: -10%;
  top: -10%;
  width: 60%;
  height: 120%;
}

JSFiddle

Answer 1

对于这种特殊的解决方案，我建议使用背景图像，其中线性渐变指示两种颜色，而度和百分比则决定了它们的边界。这是一个示例：

.diagonal-color-div{
  background-color: #fff;
  background-image: -webkit-linear-gradient(10deg, #fff 50%, #004E95 50%);
  min-height: 1080px;
}

以下是现场演示的代码：https://codepen.io/anon/pen/qKYmdv

Answer 2

TABLE_PER_CLASS

.background {
  background: blue;
  width: 100%;
  height: 100%;
  transform: skew(10deg);
}

.background2 {
  width: 10%;
  position: absolute;
  right: -15%;
  top: 0;
  background-color: blue;
  height: 110%;
}

.right {
  position: absolute;
  left: 50%;
  top: -10%;
  width: 60%;
  height: 120%;
}

不管屏幕大小如何，将div旋转到屏幕的全高和半边

2 个答案: