CSS3：斜め線を用いた印象的なコンテンツブロック

久しぶりの更新。たまには実用的な内容を更新したいと思います。

ウェブデザインの特性上、どうしても直線のラインは上下左右に向かう場合が多く、色彩や線の太さなどで差別化しがち。そこで、今日は僅かな角度をつけるだけでアイキャッチとして機能させたボックス要素を作っていきたいと思います。

KEY SENTENCE

[1] 作成例

[2] 実装方法

[1] 作成例

とりあえずサンプルから。

click here

slide up box contents

Contents area will slide up Placing the cursor.

click here

slide up box contents

Contents area will slide up Placing the cursor.

click here

slide up box contents

Contents area will slide up Placing the cursor.

グリッドラインで均等に並べた要素に斜め線でカットされたブロック要素をあてて、リンクボタンを内側に隠す、といった内容のものを作っていきたいと思います。

[2] 実装方法

それでは実装方法を説明していこうと思います。

HTML



  <div class="solid bg director">

   <div class="box-button">

    <a href="#"><p class="fs-sm">click here</p></a>

   </div>

   <div class="box-solid">

    <p class="fs-sm bold fc-wh">slide up box contents</p>

    <p class="fs-sm fc-wh">Contents area will slide up Placing the cursor.</p>

   </div>

  </div>

CSS



.solid {

overflow:hidden;

background: url('../images/#') repeat center center;

height:400px;

-webkit-background-size: cover;

-moz-background-size: cover;

-o-background-size: cover;

background-size: cover;

position:relative;

}

.box-solid {

background:#455765;

padding:10px;

position:relative;

position:absolute;

bottom:0;

width:100%;

transition:.5s all;

-webkit-transition:.5s all;

height:150px;

}

.box-solid::before {

background:#455765;

padding:40px 0;

position:absolute;

top:-40px;

left:0;

transform:rotate(165deg);

content:" ";

width:110%;

z-index:5;

box-shadow:-3px 3px 3px rgba(0,0,0,.05);

}

.box-button {

background:#ebf6f7;

padding:13px 0 1px;

position:absolute;

bottom:0;

left:0;

width:100%;

border-bottom:solid 5px #455765;

box-shadow:0 0 5px rgba(0,0,0,.1) inset;

text-align:center;

}

.box-solid p {

position:relative; z-index:10;

}

.solid:hover .box-solid {

transform:translateY(-50px);

}