斜めデザインの作り方 #CSS

過去にCSSで斜めのデザインを実装したがありましたので、そのやり方を4つほど紹介します。

<div class="content">
  <div class="content-inner">
      <div class="text">テキストテキストテキスト</div>
  </div>
</div>

.content {
  overflow: hidden;
}
.content-inner {
  padding: 100px 50px;
  transform: skew(0deg, -10deg);
  color: #111;
}
.text {
  transform: skew(0deg, 10deg);
}

親要素を transformで斜めにして、子要素をtransformで傾けた分だけ戻してます。考え方も実装も簡単ですが、後にtransformでアニメーションさせようと思った時、使いづらいです。

<section class="contents">
    <div class="contents_inner">
    </div>
</section>

.contents {
  position: relative;
  overflow: hidden;
  margin: 10% 0;
  padding: 80px 0;
}
.contents:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 120%;
  height: 80%;
  margin: 3% -10% 0;
  background: #111;
  transform-origin: left center;
  transform: rotate(3deg);
  z-index: -1;
}
.contents_inner {
  box-sizing: boder-box;
  width: 100%;
  max-width: 640px;
  height: 100%;
  margin: 0 auto;
  padding: 100px 10px 120px;
  color: #fff;
}

疑似要素でセクション全体を斜めにしています。疑似要素なので、中身は傾斜してないのがいいですね。

<div class="Block1">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
  </p>
</div>

.Block1 {
  clip-path: polygon(0 0, 100% 25%, 100% 100%, 0 100%);
  padding: 60px 0 10px 0;
}

こちらは型抜きのような感じで実装しています。要素を三角に切り抜いて斜めにしている。切り抜くのでその分だけ余白が必要です。
clip-pathはIEには対応してないけれど、IEは2023年2月のパッチで完全無効化されるようなので問題ないですね。（IEよ、安らかに眠れ…）

<div class="Block1">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  </p>
</div>

.Block1::before{
  content:"";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 40px 0 0 100vw ;
  border-color: transparent  transparent  transparent #191970;
}

これを一番使ってます。borderで三角形を作り、擬似要素（before,after）で配置する方法です。
斜めの範囲を親要素に合わせたければ、border-widthを100%にしよう。

斜めデザインの作り方

参考記事