画像ナシ！CSSだけでリボンを描いてみよう

こんにちは、クリエイティブフレークです。



こんな風に画像を使わずに、CSSだけでリボンを描くサンプルです。

上から順番に、ひし形、リボン、右側矢印、左側矢印をそれぞれ作ってみましょう。



まずはHTML↓↓↓

<div class="diamond">Diamond</div>
<div class="ribbon">Ribbon</div>
<div class="right-arrow">Right arrow</div>
<div class="left-arrow">Left arrow</div>

そしてCSS↓↓↓

/* ここでまとめて横長の長方形を作ります */
div.diamond, div.ribbon, div.right-arrow, div.left-arrow {
 display: inline-block;
 color: #FFFFFF;
  font-size: 18px;
  line-height: 38px;
 margin: 15px 0;
 position: relative;
 width: 200px;
 text-align: center;
}

/* それぞれの長方形のbefore（前）とafter（後ろ）に大きさゼロの要素を作ります */
div.diamond:before, div.diamond:after,
div.ribbon:before, div.ribbon:after,
div.right-arrow:before, div.right-arrow:after,
div.left-arrow:before, div.left-arrow:after {
 content: "";
 border-style: solid;
 border-width: 0;
 position: absolute;
 width: 0;
 height: 0;
}

/* ひし形 */
div.diamond {
 background-color: #59C9CE;
}
div.diamond:after, div.diamond:before {
 border-color: transparent #59C9CE;
}
div.diamond:before {
 left: -19px;
 border-width: 19px 19px 19px 0;
}
div.diamond:after {
 right: -19px;
 border-width: 19px 0 19px 19px;
}

/* リボン */
div.ribbon {
 background-color: #59C9CE;
}
div.ribbon:before, div.ribbon:after {
 top: 6px;
 z-index: -15;
}
div.ribbon:before {
 border-color: #4BB5B9 #4BB5B9 #4BB5B9 transparent;
 border-width: 19px;
 left: -25px;
}
div.ribbon:after {
 border-color: #4BB5B9 transparent #4BB5B9 #4BB5B9;
 border-width: 19px;
 right: -25px;
}

/* 右側矢印 */
div.right-arrow {
 background-color: #59C9CE;
}
div.right-arrow:after, div.right-arrow:before {
 border-width: 19px 0 19px 19px;
}
div.right-arrow:before {
 border-color: #59C9CE transparent;
 left: -19px;
}
div.right-arrow:after {
 border-color: transparent #59C9CE;
 right: -19px;
}

/* 左側矢印 */
div.left-arrow {
 background-color: #59C9CE;
}
div.left-arrow:after, div.left-arrow:before {
 border-width: 19px 19px 19px 0;
}
div.left-arrow:before {
 border-color: transparent #59C9CE;
 left: -19px;
}
div.left-arrow:after {
 border-color: #59C9CE transparent;
 right: -19px;
}

ここでは長方形の前後に"before"と"after"というCSSの擬似要素を使っています。

具体的にどういうこと？を、１つ目のひし形（Diamond）を例に解説すると、

１．border : 19px; で、空の要素に上下左右それぞれ19pxのボーダーを作ります。
つまりは１辺が38pxの正方形になりますよね？

２．border-color: transparent #色番号; は、上下の枠線の色が透明で、左右の枠線の色が指定した色になることを意味します。
これで上下が切り取られたように見えることになります。

３．さらに border-width: 19px 19px 19px 0; と指定することで、左側の枠線のみなし、上下右は19pxの枠、ということになります。
これで右半分が残ることになります。



▶CSSだけでリボンを作る デモはこちら

Written by Creative Flake