使用变换改变 div 的形状

Question

我正在尝试创建一个页面，其中 'background' 由两个不同的 div 组成。目前，它们被一条垂直线分开，我正在尝试将其更改为对角线，如下图所示：

然而我似乎无法正确解决它。我的HTML文件如下：

<!DOCTYPE html>
<html>
  <head>
    <title>Studenten Opiniepanel</title>

    <link rel="stylesheet" type="text/css" href="css/main.css">
  </head>

  <body>
    <section class="container">
      <div class="left-half">
        <article>
          <img src="img/logo-hsv-white.png" alt="Hanze Studentenbelangen Vereniging" />
          <h1>Student aan de Hanzehogeschool Groningen?</h1>

          <button class="subscribe" id="hsv">Inschrijven voor het Studenten Opiniepanel</button>

    </article>
  </div>
      <div class="right-half">
        <article>
          <img src="img/logo-sog-white.png" alt="Studenten Organisatie Groningen" />
          <h1>Student aan de Rijksuniversiteit Groningen?</h1>

          <button class="subscribe" id="sog">Inschrijven voor het Studenten Opiniepanel</button>

        </article>
      </div>
    </section>
  </body>
</html>

还有我的CSS：

html, body {
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

body {
  font-size: 1.25rem;
  font-family: sans-serif;
  line-height: 150%;
  text-shadow: 0 2px 2px #b6701e;
}

section {
  color: #fff;
  text-align: center;
}

div {
  height: 100%;
}

article {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  padding: 20px;
}

h1 {
  font-size: 1.75rem;
  margin: 0 0 0.75rem 0;
}

.container {
  display: table;
  width: 100%;
}

.left-half {
  background: #f49800;
  position: absolute;
  left: 0px;
  width: 50%;
}

.right-half {
  background: #F38E09;
  position: absolute;
  right: 0px;
  width: 50%;
}

我已经尝试过使用 transform: skew() 但这只完成了一半的工作。实现我在图片中所画内容的最佳方式是什么？

Answer 1

试试这个：

HTML

<div id="container"></div>

CSS

#container {
  position: relative;
  height: 200px;
  width: 200px;
  overflow: hidden;
  background-color: grey;
}

#container:before { 
  content: '';
  position: absolute;
  left: 35%;
  width: 200%; 
  height: 200%; 
  background-color: rgb(255, 255, 255); /* fallback */
  background-color: rgba(255, 255, 255, 0.5);
  top: 0;
  -webkit-transform: rotate(25deg);
  -moz-transform: rotate(25deg);
  transform: rotate(25deg);
}

这里有一个 Fiddle 来演示。根据需要调整。

Answer 2

我设置了你试过的倾斜度，并调整了一些位置。

结果如下：

.container {
  display: table;
  width: 100%;
}
.half {
  position: absolute;
  width: 50%;
  transform: skewX(-15deg);
}
.right-half {
  left: 50%;
  background: lightblue;
  box-shadow: 100px 0px 0px lightblue;
  overflow: hidden;
}
.left-half {
  right: 50%;
  background: lightgreen;
  box-shadow: -100px 0px 0px lightgreen;
}
article {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) skewX(15deg);
  ransform: translate(-50%, -50%);
  width: 100%;
}
html,
body {
  margin: 0;
  padding: 0;
}
* {
  box-sizing: border-box;
}
body {
  font-size: 1.25rem;
  font-family: sans-serif;
  line-height: 150%;
  text-shadow: 0 2px 2px #b6701e;
}
section {
  color: #fff;
  text-align: center;
}
div {
  height: 100%;
}
h1 {
  font-size: 1.75rem;
  margin: 0 0 0.75rem 0;
}

<section class="container">
  <div class="half left-half">
    <article>
      <img src="http://lorempixel.com/400/200" alt="Hanze Studentenbelangen Vereniging" />
      <h1>Student aan de Hanzehogeschool Groningen?</h1>

      <button class="subscribe" id="hsv">Inschrijven voor het Studenten Opiniepanel</button>

    </article>
  </div>
  <div class="half right-half">
    <article>
      <img src="http://lorempixel.com/400/200" alt="Studenten Organisatie Groningen" />
      <h1>Student aan de Rijksuniversiteit Groningen?</h1>

      <button class="subscribe" id="sog">Inschrijven voor het Studenten Opiniepanel</button>

    </article>
  </div>
</section>

使用变换改变 div 的形状

Using transform to change shape of div

html

css

css-transforms

HTML

CSS