Category
Archives
Cocotiie
2006年:Web制作に関する覚書きブログをはじめる。

2018年:Cocotiie(ココッティー)・・・ここちいい(笑)として運営開始。

2021年:インバウンド業界は復活の目途が立たず失業の危機!現実逃避でブログをSwellでリニューアル。

Trial And Errorの精神で勉強中です。少しでも誰かの助けになれれば嬉しいです。宜しくお願い致します。
テーマをSWELLにしてリニューアルしましたSWELLについて

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

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

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

INDEX

共通の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;
}

三角の考え方について

とても分かりやすかったので参考にさせて頂きました。

SWELLなら簡単にできます

このサイトで使用しているテーマ「SWELL」なら、エディターで簡単に斜めのデザインができちゃいます。斜めの他、波、ジグザグデザインも。CSSで上手く出来なかった方におすすめです。

斜めのデザイン

\ ぜひ使って欲しい /

Swell

高機能、驚きの使い心地
プログラミング不要で素敵なサイトが作れます

よかったらシェアお願いします

コメント

コメントする

INDEX
閉じる