{
border-top: 0 solid transparent;
border-right: 15px solid #0097A7;
border-bottom: 15px solid transparent;
border-left: 0 solid transparent;
}{
border-style: solid;
border-color: transparent;
border-width: 0 15px 15px 0;
border-right-color: #0097A7;
}<h1>見出しテキスト</h1>h1 {
position: relative;/*擬似要素を配置するための基準にする*/
padding: .3em;
background-color: #B2EBF2;
color: #0097A7;
}
h1::before {
content: '';
/*h1で指定した基準に対して相対配置をする*/
position: absolute;
/*h1のコンテンツの上からの位置*/
top: 100%;
/*h1のコンテンツの左からの位置*/
left: 0;
/*三角形を作る設定*/
/*ボーダーのスタイルは直線に設定*/
border-style: solid;
/*rightだけに色を設定*/
border-color: transparent #0097A7 transparent transparent;
/*三角を作るためにrightとbottomのサイズを指定それ以外は0に*/
border-width: 0 15px 15px 0;
}
CSS3などで新たに追加された要素･装飾方法など、日々コードを書いていないと忘れてしまったり、ささっとプロトタイプを作る時などちょっとしたことに時間をかけている暇はない。そんな時に「あ〜、あれストックしときゃよかったなぁ」って困った自分用のストックブログです。カスタマイズなどがしやすいよう、昨今のweb制作に取り入れられる一般的なコードを中心に掲載しています。
@copypet_jp More Info