逆角丸のボックス

必要に迫られ、作ってみた。応用はいろいろあるのではないだろうか。

下のように、各角に円を配置し、overflow:hidden で 表示させたくない円の3/4を非表示させている。

 

 

処理後

 

 

<div id="box01" class="box-outer">
<div class="circle top-left"></div><div class="circle top-rigt"></div><div class="circle btm-left"></div><div class="circle btm-rigt"></div>
<div class="box-block">
#box01
</div>
</div>

 

.box-outer { position: relative; z-index: 1; overflow: hidden; width: 100%; }
.box-block { position: relative; width: auto; }
.circle { width: 18px; height: 18px; position: absolute; z-index: 2; -webkit-border-radius: 100%; -moz-border-radius: 100%; -ms-border-radius: 100%; -o-border-radius: 100%; border-radius: 100%; }

.top-left { left: -9px; top: -9px; }
.top-rigt { right: -9px; top: -9px; }
.btm-left { left: -9px; bottom: -9px; }
.btm-rigt { right: -9px; bottom: -9px; }

#box01 .circle { background: #FFF; border: 1px solid #CCC; }
#box01 .box-block { background: #FFF; border: 1px solid #CCC; padding: 25px; }

  参考 http://www.bchanx.com/logos-in-pure-css-demo

基本的にやっていることは同じだけど、それらCSSのみで、有名IT企業のロゴを正確に再現している。