所以我试图找出CSS中的反圆/切圆。目前,我发现 this answer ScottS 。
他的代码对我来说非常合适,现在我正在寻找相同的效果,但在<div>
元素的另一面。所以我不需要在左侧切割,而是在右侧需要它。
这是现有代码:
body {
padding: 10px;
background: url(http://www.dummyimage.com/12x16/ff0000/ffffff.png&text=X++) top left repeat;
}
.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) 0, rgba(0, 0, 0, 0) 55px, black 56px, grey 57px);
background-image: -ms-radial-gradient(-23px 50%, circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 55px, black 56px, grey 57px);
background-image: -o-radial-gradient(-23px 50%, circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 55px, black 56px, grey 57px);
background-image: radial-gradient(-23px 50%, circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 55px, black 56px, grey 57px);
}
<div id="a" class="inversePair">A</div>
<div id="b" class="inversePair">B</div>
那我该如何反映呢?
答案 0 :(得分:1)
您可以使用以下解决方案(原始答案):
body {
padding: 10px;
background: url(http://www.dummyimage.com/12x16/ff0000/ffffff.png&text=X++) top left repeat;
}
.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-right: 30px;
margin-right: -30px;
/* real borders */
border-right: none;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomleft: 20px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
/* the inverse circle "cut" */
background-image: -moz-radial-gradient(calc(100% + 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(calc(100% + 23px) 50%, circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 55px, black 56px, grey 57px);
background-image: -ms-radial-gradient(calc(100% + 23px) 50%, circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 55px, black 56px, grey 57px);
background-image: -o-radial-gradient(calc(100% + 23px) 50%, circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 55px, black 56px, grey 57px);
background-image: radial-gradient(calc(100% + 23px) 50%, circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 55px, black 56px, grey 57px);
}
<div id="b" class="inversePair">B</div>
<div id="a" class="inversePair">A</div>
原始答案(优化版) - code on JSFiddle:
body {
padding:10px;
}
/** the common design of the items. */
#a, #b {
border:1px solid black;
display:inline-block;
height:100px;
line-height:100px;
position:relative;
text-align:center;
vertical-align:middle;
}
/** the design of item A (cicle). */
#a {
background:grey;
border-radius:50%;
width:100px;
z-index:1;
}
/** the design of item B (cut out). */
#b {
width: 200px;
/** the gap between item A and B. */
margin:0 -20px 0 0;
padding:0 40px 0 0;
/** the real border. */
-webkit-border-radius:20px 0 0 20px;
-moz-border-radius:20px 0 0 20px;
border-radius:20px 0 0 20px;
border-width:1px 0 1px 1px;
/** the cut out on the right side. */
background-image: -moz-radial-gradient(calc(100% + 23px) 50%, circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 55px, black 56px, grey 57px);
background-image: -webkit-radial-gradient(calc(100% + 23px) 50%, circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 55px, black 56px, grey 57px);
background-image: -ms-radial-gradient(calc(100% + 23px) 50%, circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 55px, black 56px, grey 57px);
background-image: -o-radial-gradient(calc(100% + 23px) 50%, circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 55px, black 56px, grey 57px);
background-image: radial-gradient(calc(100% + 23px) 50%, circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 55px, black 56px, grey 57px);
}
<div id="b">B</div>
<div id="a">A</div>
启用简单对齐的另一种解决方案 - code on JSFiddle:
body {
padding:10px;
}
/** the common design of the items. */
#a, #b {
border:1px solid black;
display:inline-block;
height:100px;
line-height:100px;
position:relative;
text-align:center;
vertical-align:middle;
}
/** the alignment of the items. */
.item-align-left, .item-align-right {
display:flex;
margin-bottom:10px;
}
.item-align-left #a, .item-align-right #b {
order:1;
}
.item-align-right #a, .item-align-left #b {
order:2;
}
/** the design of item A (cicle). */
#a {
background:grey;
border-radius:50%;
width:100px;
z-index:1;
}
/** the design of item B (cut out). */
#b {
width: 200px;
}
/** the right aligned item B (cut out on right side). */
.item-align-right #b {
/** the gap between item A and B. */
margin:0 -20px 0 0;
padding:0 40px 0 0;
/** the real border. */
-webkit-border-radius:20px 0 0 20px;
-moz-border-radius:20px 0 0 20px;
border-radius:20px 0 0 20px;
border-width:1px 0 1px 1px;
/** the cut out on the right side. */
background-image: -moz-radial-gradient(calc(100% + 23px) 50%, circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 55px, black 56px, grey 57px);
background-image: -webkit-radial-gradient(calc(100% + 23px) 50%, circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 55px, black 56px, grey 57px);
background-image: -ms-radial-gradient(calc(100% + 23px) 50%, circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 55px, black 56px, grey 57px);
background-image: -o-radial-gradient(calc(100% + 23px) 50%, circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 55px, black 56px, grey 57px);
background-image: radial-gradient(calc(100% + 23px) 50%, circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 55px, black 56px, grey 57px);
}
/** the left aligned item B (cut out on left side). */
.item-align-left #b {
/** the gap between item A and B. */
margin:0 0 0 -20px;
padding:0 0 0 40px;
/** the real border. */
-webkit-border-radius:0 20px 20px 0;
-moz-border-radius:0 20px 20px 0;
border-radius:0 20px 20px 0;
border-width:1px 1px 1px 0;
/** the cut out on the left side. */
background-image: -moz-radial-gradient(-23px 50%, circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 55px, black 56px, grey 57px);
background-image: -webkit-radial-gradient(-23px 50%, circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 55px, black 56px, grey 57px);
background-image: -ms-radial-gradient(-23px 50%, circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 55px, black 56px, grey 57px);
background-image: -o-radial-gradient(-23px 50%, circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 55px, black 56px, grey 57px);
background-image: radial-gradient(-23px 50%, circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 55px, black 56px, grey 57px);
}
<div class="item-align-right">
<div id="a">A</div>
<div id="b">B</div>
</div>
<div class="item-align-left">
<div id="a">A</div>
<div id="b">B</div>
</div>