ドッグイヤー風
読みかけのページを折るようなドッグイヤー風の見出しです。
背景の色が単色ではない場合は、グラデーション等を使って背景部分をカット(transparentに設定)する必要があります。
これなら、単色でもグラデーションでも柄ものでも気にせず使えます。
背景のグラデーション設定は
background: linear-gradient(225deg, transparent 11px, #00897B 11px, #00897B 100%);
225度に傾いたグラデーション(左下から右上)で、右上から11pxのところまでを透過、そこから全体を緑色(#00897B)に設定し
背景部分を一部切り取ったように再現します。
11pxというのは、afterで設定する直角二等辺三角形の高さを使用します。
直角二等辺三角形の斜辺を15pxとしたとき底辺は15px*√2で大体21.3px
そこから高さを出すために21.3px/2=10.6px
が目安となります。なので10.6pxとしたいところですが、目視でうっすら線が見えるので、11pxでカットしています。
算数が得意ではないので、これ以上の説明は専門サイトなどにお任せするとして。
計算サイトなどを使うと大体の目安はつくと思います。