🔖

背景画像を斜めに切り取る方法(2パターン)

2024/03/11に公開

背景画像をclip-pathで斜めに切り取る方法

ポイントとなるコードはこちら↓

.bg-wrap { //imgの親要素
  clip-path: polygon(0 100%, 100% 80%, 100% 0, 0 20%);
　　　 //起点(0,0)は左上 作りたい形を囲むように座標を指定 例)polygon(左下, 右下, 右上, 左上)
}

プロパティはこちら↓

背景を擬似要素で斜めに切り取る(隠す方法)

ポイントとなるコードはこちら↓

.bg-wrap {
  width: 100%;
  padding-bottom: calc(200 / 1000 * 100%);//画像の比率(高さ / 画面幅)
  position: relative;
  overflow: hidden;
  & img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  &::after {
      content: '';
      position: absolute;
      width: 100%;
      height: calc(50 / 200 * 100%); //擬似要素の高さを可変にする
      transform: skewY(-2deg); //斜めにする
      transform-origin: right bottom;　//回転の起点を指定
      background-color: aqua; //背景画像の上の背景の色を指定
      top: calc(-50 / 200 * 100%); //擬似要素を置く位置を可変にする
      left: 0;
      z-index: 2;
  }
  &::before {
    content: '';
    position: absolute;
    width: 100%;
    height: calc(50 / 200 * 100%); //擬似要素の高さを可変にする
    transform: skewY(-2deg); //斜めにする
    background-color: aqua; //背景画像の下の背景の色を指定
    transform-origin: left bottom; //回転の起点を指定
    bottom: calc(-50 / 200 * 100%); //擬似要素を置く位置を可変にする
    right: 0;
    z-index: 2;
}
}

画面幅を広げると擬似要素の高さも大きくする必要があるため、
レスポンシブに応じて背景画像の高さは固定値ではなく、変化します。

背景画像をclip-pathで斜めに切り取る方法

背景を擬似要素で斜めに切り取る(隠す方法)

Discussion