[CSS] 背景を斜めにカット (レスポンシブ)

斜め

背景色や画像を斜めに切り貼りした感じの企業のキャンペーンページなどでよく見かけるアレです。ちょっとカッコよく、動きがある感じのランディングページにする事が出来ます。

レスポンシブにも対応したCSSで三角を作る方法を使った応用編をご紹介します。初心者でも簡単な方法とアレンジ可能なちょっと複雑編をご紹介します。デザインの幅が広がります!

共通のhtml

<section class="section1">
<div class="container">
  コンテンツ
</div>
</section>
<section class="section2">
  <div class="container">
  コンテンツ
</div>
</section>

単に斜めにする(初心者向もOK)

単にsection全体を-(マイナス)で斜めに傾けたので、.containerのコンテンツも一緒に傾きます。それを逆方向にする事でコンテンツを真っすぐに戻しています。

斜め
.section1{background-color:#E5E5E5;-webkit-transform: skew(0deg, -3deg);}
.section1 .container{-webkit-transform: skew(0deg, 3deg);}

三角を使った方法(基本)

斜め

三角を反対向きにするには「border-right」を「border-left」に、上下の反転は「border-bottom」を「border-top」にします。

グレーにした.section1の背景に、::beforeで白い三角を作り色を変えて斜めに見える様にした状態

.section1{ 
  padding-bottom: calc(10vw + 10px);  
    position: relative;
    overflow: hidden;
    background-color:#E5E5E5;} /* .section1の背景 */ 
.section1::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  border-bottom: 10vw solid #fff;  /* 三角を白にする */ 
  border-left: 100vw solid transparent;
}

応用編:上下を斜めにする

斜め

.section1にグレーの三角をつけ、.section2に白の三角を付ける事で斜めのsectionに見せます。

.section1{ 
  padding-bottom: calc(10vw + 10px);  
    position: relative;
    overflow: hidden;
    background-color:#fff;} /* .section1の背景 */ 
.section1::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  border-bottom: 10vw solid #E5E5E5;  /* 三角をグレーにする */ 
  border-left: 100vw solid transparent;
}

そして

.section2{ 
  padding-bottom: calc(10vw + 10px);  
    position: relative;
    overflow: hidden;
    background-color:#E5E5E5;} /* .section2の背景 */ 
.section2::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  border-bottom: 10vw solid #fff;  /* 三角を白にする */ 
  border-left: 100vw solid transparent;
}

応用編:矢印型にする

矢印

border-bottom: 10vw (三角の高さ)の数値をより大きくすると尖った矢印になります。

.section1{ 
  padding-bottom: calc(10vw + 10px);  
    position: relative;
    overflow: hidden;
    background-color:#E5E5E5;} /* .section1の背景 */ 
.section1::before {
   content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      border-bottom: 10vw solid #fff;  /* 三角を白に */ 
      border-left: 100vw solid transparent;
}
.section1::after {
  content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      border-bottom: 10vw solid #fff;   /* 三角を白に */ 
      border-right: 100vw solid transparent;
}

応用編:おしゃれ系

それぞれの三角を下のsectionの色と上下のどちらでも無い色にすると、ちょっとオシャレな感じになります。

CSSで三角
.section1{ 
  padding-bottom: calc(10vw + 10px);  
    position: relative;
    overflow: hidden;
    background-color:#E5E5E5;} /* .section1の背景 */ 
.section1::before {
   content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      border-bottom: 5vw solid #999;  /* ちら見せ三角 高さを調節*/ 
      border-left: 100vw solid transparent;
}
.section1::after {
  content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      border-bottom: 10vw solid #fff;   /* 三角を白に */ 
      border-right: 100vw solid transparent;
}

三角の考え方について

こちらのサイト がすごく分かりやすかったので参考にさせて頂きました。

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください