CSSのみでBOXの端に三角形を装飾する
勝手なイメージだけど、FireworksやIllustratorでデータ納品してくる人に多い気がするBoxの装飾
1 | .box{ |
2 | position: relative; |
3 | text-align: center; |
4 | width: 300px; |
5 | line-height: 80px; |
6 | border: 2px solid #F6C7C1; |
7 | } |
8 | .box:after{ |
9 | position: absolute; |
10 | right:0; |
11 | bottom: 0; |
12 | content: ''; |
13 | border-top:7px solid #fff; |
14 | border-left:7px solid #fff; |
15 | border-right: 7px solid #F6C7C1; |
16 | border-bottom: 7px solid #F6C7C1; |
17 | box-sizing: border-box; |
18 | } |
これは7pxの三角形を作りたい場合の数値。
ポイントは指定されているpxの半分のborderを記述する。
ボックス内がグラデーションや画像を入れている場合は三角形の部分以外のborderをこうすればいい。
1 | border-top:7px solid transparent; |
2 | border-left:7px solid transparent; |