勝手なイメージだけど、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 ; |