css使形状变成圆形,CSS 3形状：“反向圆”或“剪切圆”

更新：CSS3径向背景渐变选项

(对于支持它的浏览器 – 在FF和Chrome – IE10中测试，Safari也应该工作)。

我的原始答案的一个“问题”是那些没有坚实的背景，他们正在反对的情况。此更新创建相同的效果，允许圆形和它的反切割之间的透明“间隙”。

CSS

.inversePair {

border: 1px solid black;

display: inline-block;

position: relative;

height: 100px;

text-align: center;

line-height: 100px;

vertical-align: middle;

}

#a {

width: 100px;

border-radius: 50px;

background: grey;

z-index: 1;

}

#b {

width: 200px;

/* need to play with margin/padding adjustment

based on your desired "gap" */

padding-left: 30px;

margin-left: -30px;

/* real borders */

border-left: none;

-webkit-border-top-right-radius: 20px;

-webkit-border-bottom-right-radius: 20px;

-moz-border-radius-topright: 20px;

-moz-border-radius-bottomright: 20px;

border-top-right-radius: 20px;

border-bottom-right-radius: 20px;

/* the inverse circle "cut" */

background-image: -moz-radial-gradient(

-23px 50%,/* the -23px left position varies by your "gap" */

circle closest-corner,/* keep radius to half height */

transparent 0,/* transparent at center */

transparent 55px,/*transparent at edge of gap */

black 56px,/* start circle "border" */

grey 57px /* end circle border and begin color of rest of background */

);

background-image: -webkit-radial-gradient(-23px 50%,circle closest-corner,rgba(0,0) 0,0) 55px,black 56px,grey 57px);

background-image: -ms-radial-gradient(-23px 50%,grey 57px);

background-image: -o-radial-gradient(-23px 50%,grey 57px);

background-image: radial-gradient(-23px 50%,grey 57px);

}

原始答案

HTML

A

B

CSS

.inversePair {

border: 1px solid black;

background: grey;

display: inline-block;

position: relative;

height: 100px;

text-align: center;

line-height: 100px;

vertical-align: middle;

}

#a {

width: 100px;

border-radius: 50px;

}

#a:before {

content:' ';

left: -6px;

top: -6px;

position: absolute;

z-index: -1;

width: 112px; /* 5px gap */

height: 112px;

border-radius: 56px;

background-color: white;

}

#b {

width: 200px;

z-index: -2;

padding-left: 50px;

margin-left: -55px;

overflow: hidden;

-webkit-border-top-right-radius: 20px;

-webkit-border-bottom-right-radius: 20px;

-moz-border-radius-topright: 20px;

-moz-border-radius-bottomright: 20px;

border-top-right-radius: 20px;

border-bottom-right-radius: 20px;

}

#b:before {

content:' ';

left: -58px;

top: -7px;

position: absolute;

width: 114px; /* 5px gap,1px border */

height: 114px;

border-radius: 57px;

background-color: black;

}