2014/08/27

リボン風の見出しをCSS3だけで実装する方法

リボン風の見出しをCSS3だけで実装する:HTMLを記述する

まずはHTMLを記述します。
ポイントは空のspan要素を準備すること。
このspan要素にclass属性を設定し、これに対してCSSで装飾します。

   <div id="container">
      
        <h1> My Heading <span class="arrow"></span> </h1>
         
    </div>

<h1> My Heading <span class="arrow"></span> </h1>

</div>

リボン風の見出しをCSS3だけで実装する:CSSを記述する

つづいてCSSを記述します。
h1に対しては通常通りに記述して、背景を実装しますが、margin-left: -20px;で左に少しずらすのがポイントです。

#container {
    background: #666;
    margin: auto;
    width: 500px;
    height: 700px;
    padding-top: 30px;
    font-family: helvetica, arial, sans-serif;
    }
 
h1 {
     background: #e3e3e3;
     background: -moz-linear-gradient(top, #e3e3e3, #c8c8c8);
     background: -webkit-gradient(linear, left top, left bottom, from(#e3e3e3), to(#c8c8c8));
     padding: 10px 20px;
     margin-left: -20px;
     margin-top: 0;
     position: relative;
     width: 70%;
 
    -moz-box-shadow: 1px 1px 3px #292929;
    -webkit-box-shadow: 1px 1px 3px #292929;
       box-shadow: 1px 1px 3px #292929;
 
    color: #454545;
    text-shadow: 0 1px 0 white;
}
.arrow {
  width:0;
  height:0;
  line-height:0;
  border-left:20px solid red;
  border-top:10px solid blue;
  position:absolute;
  top:104%;
  left:0;
}

#container {

background: #666;

margin: auto;

width: 500px;

height: 700px;

padding-top: 30px;

font-family: helvetica, arial, sans-serif;

}

h1 {

background: #e3e3e3;

background: -moz-linear-gradient(top, #e3e3e3, #c8c8c8);

background: -webkit-gradient(linear, left top, left bottom, from(#e3e3e3), to(#c8c8c8));

padding: 10px 20px;

margin-left: -20px;

margin-top: 0;

position: relative;

width: 70%;

-moz-box-shadow: 1px 1px 3px #292929;

-webkit-box-shadow: 1px 1px 3px #292929;

box-shadow: 1px 1px 3px #292929;

color: #454545;

text-shadow: 0 1px 0 white;

}

.arrow {

width:0;

height:0;

line-height:0;

border-left:20px solid red;

border-top:10px solid blue;

position:absolute;

top:104%;

left:0;

}

リボン風の見出しをCSS3だけで実装する方法

リボンがかかったようにみせるため、リボンの下部分を実装していきます。
widthとheightは0pxにするのがポイントです。
これで、borderプロパティを利用してリボン下部分を実装します。
border-leftとborder-rightで三角形を描きます。
色を赤と青で見ると、以下のような形になっています。
border-topがリボンの下側になっていることがわかります。

.arrow {
  width:0;
  height:0;
  line-height:0;
  border-top:10px solid blue;
  border-left:20px solid red;
}

.arrow {

width:0;

height:0;

line-height:0;

border-top:10px solid blue;

border-left:20px solid red;

}

リボン風の見出しをCSS3だけで実装する方法

赤色部分の色をtransparent 透明にすれば、三角形だけに形になるとうわけです。
あとは、positionプロパティで、位置を調整して完成です。

.arrow {
     width: 0; height: 0;
     line-height: 0;
     border-left: 20px solid transparent;
     border-top: 10px solid #c8c8c8;
     top: 104%;
     left: 0;
     position: absolute;
     }