css3による背景テクニック
対応ブラウザ:IE,Firefox,Google Chrome,Safari
参考サイト:http://ascii.jp/elem/000/000/592/592601/
背景画像を使わずに右上の箇所を折り曲げています。
-CSS-
.fold{
position: relative;
width: 500px;
padding: 12px 16px;
margin: 40px auto 0;
color: #fff;
background: #0ae;
overflow: hidden;
}
.fold:before{ /*右上の折り角*/
content: "";
position: absolute;
top: 0;
right: 0;
border-width: 0px 14px 14px 0px;
border-style: solid;
border-color: #fff #fff #06c #06c;
-webkit-box-shadow: 0 1px 1px rgba(0,0,0, .3), -1px 1px 1px rgba(0,0,0, .2);
-moz-box-shadow: 0 1px 1px rgba(0,0,0, .3), -1px 1px 1px rgba(0,0,0, .2);
box-shadow: 0 1px 1px rgba(0,0,0, .3), -1px 1px 1px rgba(0,0,0, .2);
background-color : #06c;
}
css3を使い背景と右上の箇所を角丸に折り曲げています。
-CSS-
.fold02{
position: relative;
width: 500px;
padding: 12px 16px;
margin: 40px auto 0;
color: #fff;
background-color: #0ae;
overflow: hidden;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.fold02:before{ /*右上の折り角丸*/
content: "";
position: absolute;
top: 0;
right: 0;
border-width: 4px 12px 12px 4px;
border-style: solid;
border-color: #fff #fff transparent transparent;
-webkit-border-bottom-left-radius: 6px;
-moz-border-radius: 0 0 0 6px;
border-radius: 0 0 0 6px;
-webkit-box-shadow: 0 1px 1px rgba(0,0,0, .3), -1px 1px 1px rgba(0,0,0, .2);
-moz-box-shadow: 0 1px 1px rgba(0,0,0, .3), -1px 1px 1px rgba(0,0,0, .2);
box-shadow: 0 1px 1px rgba(0,0,0, .3), -1px 1px 1px rgba(0,0,0, .2);
background-color: #06c;
}
別の色でもやってみる、変更箇所はborder-colorとbackground-colorのみ。
色を変えてborder-widthを大きくした。
IEとFirefoxではborder-radiusを大きくすると右上の丸角にうっすらborderが見えるのが今後の課題、今回の場合は12pxを指定しています。
border-radiusを20pxと更に大きくしてみてもやはり右上にborderが見える