Question

我试图制作一个角落块，创建一个单页，如下图所示。但是我遇到了一个问题。我试图制作div斜坡，但是当看到不同的分辨率时，它看起来很弯曲。 What i need screen

（还有一个问题是，在这些倾斜的div之前有一个背景图像和一些留下这个div的洞，图片显示出来了。）My Fail Screen

＆＃13;

.tri-index-right {
  background: #fff;
  height: 150px;
  width: 100%;
  transform: skewY(4deg);
  overflow: hidden;
  position: relative;
  z-index: 2; /*fail method*/
}

＆＃13;

我无法理解如何使用宽度为100％的CSS方法扩展此角度。

＆＃13;

.1 {
  min-width: 500px;
}
#triangle-left {
	width: 0;
	height: 0;
	border-top: 10px solid transparent;
	border-right: 100px solid red;
	border-bottom: 100% solid transparent;
}

＆＃13;

<div class="1">
<div id="triangle-left"></div>
</div>

＆＃13;

我将非常感谢帮助

Answer 1

您可以使用vw作为全宽或使用svg

.one {
  width: 100%;
  height: 200px;
  background: url('https://imgur.com/a/kA3XA') center center no-repeat;
  background-size: cover;
}

#triangle-left {
  width: 0;
  height: 0;
  border-top: 100px solid transparent;
  border-right: 100vw solid red;
}

<div class="one">
  <div id="triangle-left"></div>
</div>

你也可以使用svg来实现这个

.main {
  position: relative;
  min-height: 200px;
}

.svg-container svg {
  width: 100%;
  height: 150px;
  fill: #333; /* change color to white since */
}

<div class="main">
  <!-- main image -->
</div>
<div class="svg-container">
  <svg xmlns="https://www.w3.org/2000/svg" version="1.1" class="separator" viewBox="0 0 100 100" preserveAspectRatio="none">
    <path d="M0 100 L100 0 L100 100 Z"></path>
  </svg>
</div>

Answer 2

你也可以使用多个背景图像，包括一个清晰的渐变：

<header>
  <h1>whatever</h1>
</header>
<div>next content</div>

{{1}}

角DIV透明填充

2 个答案: