用CSS歪曲边缘

Question

我试图复制这个，基本上是：

所以基本上两个50％<div>并排，有一些绝对定位形式（我假设），以实现左框超越右框的顶部（红线只表示视口的中间位置

任何提示？谢谢:)）

Answer 1

.container {
  width: 500px;
  height: 300px;
  border: 1px solid black;
  position: relative;
  overflow: hidden;
}

.box1 {
  width: 100%;
  height: 100%;
  background-color: blue;
  transform: skewX(-20deg) translateX(-40%);
  position: absolute;
  z-index: 10;
} 

.box2 {
  width: 100%;
  height: 100%;
  background-color: red;
  z-index: 0;
}

Should be pretty simple with CSS3.

<div class="container">
  <div class="box1"></div>
  <div class="box2"></div>
</div>

Answer 2

试试这个

.wrapper {
  overflow-x: hidden;
}

.outer {
  position: absolute;
  width: 2000px;
  left: 50%;
  bottom: 0;
  margin-left: -1000px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.left__inner {
  background: goldenrod;
  padding: 24px 48px;
  flex: 1;
  transform: skew(45deg);
  display: flex;
  justify-content: flex-end;
}

.right__inner {
  background: #222;
  padding: 24px 48px;
  flex: 1;
  transform: skew(45deg);
}

.left__text,
.right__text {
  transform: skew(-45deg);
  span {
    font-weight: 200;
    font-size: 36px;
    text-transform: uppercase;
  }
}

.left__text {
  color: #3c3c3c;
}

.right__text {
  color: Goldenrod;
}

<div class="wrapper">
  <div class="outer">
    <div class="left__inner">
      <div class="left__text">
        <span> so skewy</span>
      </div>
    </div>
    <div class="right__inner">
      <div class="right__text">
        <span>span much angle</span>
      </div>
    </div>
  </div>
</div>

Answer 3

我会这样做 这只是一个例子，而不是现成的解决方案））

<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>

.container {
display: flex;
}

.container div {
width: 50%;
height: 200px;
position: relative;
}

.container .left:before {
content: '';
position: absolute;
right: 0;
top: 0;
height: 100%;
transform: skewY(-1.5deg);
background: inherit;
}

Answer 4

我使用伪元素提供没有转换的版本。它更快，不会扭曲文本。

＆＃13;

＆＃13;

.container {
  width: 500px;
  height: 300px;
  border: 1px solid black;
  position: relative;
  overflow: hidden;
}

.box1 {
  width: 50%;
  height: 100%;
  background-color: blue;
  position: absolute;
  left: 0;
} 

.box1::after{
  background: linear-gradient(to bottom right, blue 50%, transparent 0);
  content: " ";
  width: 20%;
  height: 100%;
  position: absolute;
  left: 100%;
  z-index: 1;
}

.box2 {
  width: 50%;
  height: 100%;
  background-color: red;
  position: absolute;
  right: 0;
}

＆＃13;

<div class="container">
  <div class="box1"></div>
  <div class="box2"></div>
</div>

＆＃13;

＆＃13;

＆＃13;