CSS疑似要素 :before, :after で作る見出しデザイン　リボン

見出しに共通の基本CSS

.box0, .box1, .box2, .box3, .box4{
font-size:20px;
font-weight:bold;
padding:15px;
margin:10px 0px;
line-height: 1; 　/* 枠の高さを制御 */
}

　

吹き出しの見出しを作る時は、文字の入った枠の下に同色の小さな三角を敷いた。
リボンの見出しを作る時は、
文字の入った枠の上に白い三角をのせて、その部分が切り取られているように見せる。

（三角の切り込み部分を白でなく透明で作る別の方法もある。
　→　その場合、位置の指定の仕方が変わってくる。）

border-right　にのみ白を設定。（残りは透明）

.box1{
    position:relative;
    background-color: #4D7AFF;
    color: #fff;
}
.box1:before{
    content: '';
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    top:0;
    right: 0;
    border-top: 25px solid transparent;
    border-right: 25px solid #fff;
    border-left: 25px solid transparent;
    border-bottom:25px solid transparent;
}

□の形を×で区切った時の
上の赤の三角の部分　＝　border-top　
右の黄の三角の部分　＝　border-right　 　　
下の緑三角の部分　＝　border-bottom　　
左の青の三角の部分　＝　border-left　　と考えて
色（または透明）、サイズ、位置を指定していく。

※枠の部分は position:relative 、疑似要素でくっつける部分は position: absolute; になっていること！

　

枠の左角を20pxの角丸に、右の三角の形を縦長に（幅を狭く）してみた。

.box2{
    position:relative;
    background-color: #C54EFE;
    color: #fff;
    border-radius:20px 0px 0px 20px;
}
.box2:before{
    content: '';
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    top:0;
    right: 0;
    border-top: 25px solid transparent;
    border-right: 15px solid #fff;
    border-left: 15px solid transparent;
    border-bottom:25px solid transparent;
}

　

両サイドにリボンの切り込みを入れてみた。（beforeで右側、afterで左側を指定してみた）

.box3{
    position:relative;
    background-color: #B3FD4F;
    color: #FF3F00;
}
.box3:before{
    content: '';
    position: absolute;
    display: block;
    width: 0;
    height: 0;
	top:0;
    right: 0;
    border-top: 25px solid transparent;
    border-right: 25px solid #fff;
    border-left: 25px solid  transparent;
	border-bottom:25px solid transparent;
}
.box3:after{
    content: '';
    position: absolute;
    display: block;
    width: 0;
    height: 0;
	top:0;
    left: 0;
    border-top: 25px solid transparent;
    border-right: 25px solid transparent;
    border-left: 25px solid #fff;
	border-bottom:25px solid transparent;
}

　
　

この方法でリボンでない形もいろいろ作れる。