CSSでクラシカルなリボンデザインの見出しを作る

シンプルな折り返し付きのリボンを作りました。
お好みにあわせて、box-shadowで下に影をつけるとより本物のリボンっぽくなるかも。

<h3>見出しタイトル</h3>

h3 {
    position: relative;
    display: inline-block;
    width: 20em;
    height: 50px;
    line-height: 50px;
    padding: 0 3rem;
    background-color: #efdfe1;
    font-weight: lighter;
    margin-left: -48px;
}
h3::before {
    position: absolute;
    bottom: 100%;
    left: 0;
    width: 0px;
    height: 0px;
    border: none;
    border-top: 10px solid transparent;
    border-right: 20px solid #999;
    content: '';
}
h3::after {
    right: -15px;
    border-width: 25px 15px 25px 0px;
    position: absolute;
    top: 0;
    width: 0px;
    height: 0px;
    border-color: #efdfe1 transparent;
    border-style: solid;
    content: '';
}

width:はautoにすると見出しの文字数に応じて可変してくれるけど、見た目がガタガタして微妙なので、親要素からサイズを継承できる単位（%、em）で指定するといいと思います。

デザインとの兼ね合いにもよりけりですが、横幅が長すぎるとあまり可愛くない気がします。

リボンの太さはこの２か所を適宜書き換えて調整。

    height: 50px;
    line-height: 50px;

    border-width: 25px 15px 25px 0px;

折り返しの部分はここで調整。

    border-top: 10px solid transparent;
    border-right: 20px solid #999;

後から見るとリボン細かったな…と感じて、最終的には下記の数値に調整しました。

h3 {
~~~
    height: 60px;
    line-height: 60px;
~~~

h3::after {
~~~
    border-width: 30px 15px 30px 0px;
~~~

なお、スマホは折り返し無し。