読みかけのページを折るようなドッグイヤー風の見出しです。
背景の色が単色ではない場合は、グラデーション等を使って背景部分をカット(transparentに設定)する必要があります。
これなら、単色でもグラデーションでも柄ものでも気にせず使えます。
<h1 class="cp_h1title">見出しテキスト</h1>
.cp_h1title {
position: relative;
background: linear-gradient(225deg, transparent 11px, #00897B 11px, #00897B 100%);
}
.cp_h1title::after {
content: "";
position: absolute;
background: #B2DFDB;/*三角形の色*/
top: 0;
right: 0;
width: 15px;/*三角形の横サイズ*/
height: 15px;/*三角形の縦サイズ*/
clip-path: polygon(0% 100%, 100% 100%, 0% 0%);/*三角形*/
}
CSS3などで新たに追加された要素・装飾方法など、日々コードを書いていないと忘れてしまったり、ささっとプロトタイプを作る時などちょっとしたことに時間をかけている暇はない。そんな時に「あ〜、あれストックしときゃよかったなぁ」って困った自分用のストックブログです。カスタマイズなどがしやすいよう、昨今のweb制作に取り入れられる一般的なコードを中心に掲載しています。
@CopypetJp More Info