web-dev-qa-db-ja.com

CSSで傾斜した背景を作成する方法

正確なレイアウトを示すために写真を添付し​​ました。写真の線は、色が変わる場所を示すためだけにあります。

ここに私が試したいくつかのコードがありますが、私が望むように見えません。

.block {
  background-color: black;
  left: -50;
  height: 150px;
  width: 100%;
  transform: rotate(-40deg);
}
<body>
  <div class="block">

  </div>
</body>

enter image description here

htmlcssbackground
10
Cannon Moyer

歪曲変換で疑似要素を使用できます。

body {
  height: 100vh;
  margin: 0;
  background: yellow;
}

body:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 300px;
  background: #000;
  transform: skew(-30deg);
  transform-Origin:top;
}
18
Temani Afif

ある角度で線形グラデーションを使用する

body {
 margin:0;
 }

div {
  height: 100vh;
  background: linear-gradient(105deg, black 25%, yellow 25%)
}
<div></div>
8
Paulie_D
_.left-sidebar {
  position: absolute;
  width: 20%;
  background: #000;
  transform: skewY(5px);
}
.content {
  background: #fff;
}
_

divを「曲線化」するプロパティは、CSSのこのプロパティtransform: skew(X,Y)です。試してみてください。

ただし、目的の効果を得るには、2 divを並べて作成することをお勧めします。

1
Vladimir Jovanović