使用 CSS 在矩形上画圈
Circle over a rectangle using CSS
我想设计一个类似下图的形状(介于圆形和矩形之间的效果):
我知道圆形是使用 border-radius 设计的,类似矩形的形状是用一些无序列表设计的 display: block。但我不明白如何将圆圈保持在矩形上方,以便看起来矩形的某些部分被圆形形状的圆圈切割(白色 space 介于圆形和矩形之间)。
我试过box-shadow, outline, overflow等等,但是都不行。
谁能告诉我如何设计成下图中的样子?
是这样的吗? http://codepen.io/anon/pen/VvqRep
.rectangle{
display:block;
height:40px;
width:150px;
background:red;
position:relative;
margin-top:100px;
}
.circle{
position:absolute;
height:40px;
width:40px;
border-radius:40px;
border:3px solid white;
left:50%;
margin-left:-25px;
top: -20px;
background:red;
}
"cut-off" 效果是使用圆上的边框实现的。
如果我的asnwser帮到你了,请问select好吗?谢谢
你可以试试这个:
.rectangle{
display:block;
height:50px;
width:150px;
background:red;
position:relative;
margin-top:100px;
border-top-left-radius: .5em;
border-top-right-radius: .5em;
}
.circle{
position:absolute;
height:40px;
width:40px;
border-radius:40px;
border:3px solid white;
left:50%;
margin-left:-25px;
top: -20px;
background:red;
}
#bg {
position: relative;
background: red;
width: 200px;
height: 50px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
margin-top: 50px;
}
#circle {
position: absolute;
background: red;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
top: -50px;
width: 75px;
height: 75px;
border: 3px solid #fff;
border-radius: 50%;
}
<div id="bg">
<div id="circle"></div>
</div>
看看这个:)
.base{
height:80px;
width:300px;
background:#d33;
position:relative;
margin-top:100px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.circle{
position:absolute;
height:100px;
width:100px;
border-radius:50%;
border:3px solid white;
left:50%;
margin-left:-55px;
top: -40px;
background: #d33;
}
<div class="base">
<div class="circle"></div>
</div>
使用这个:html 和 css 代码:
css:
#rectangle {
width:300px;
height:70px;
position: relative;
background: #cc0000;
border-radius: 5px 5px 0 0;
}
#rectangle #circle {
width:70px;
height:70px;
position: absolute;
top:-35px;
background:#cc0000;
border:1px solid #fff;
border-radius:70px;
left: 50%;
margin-left: -35px;
}
HTML:
<div id="rectangle">
<div id="circle"></div>
</div>
我想设计一个类似下图的形状(介于圆形和矩形之间的效果):
我知道圆形是使用 border-radius 设计的,类似矩形的形状是用一些无序列表设计的 display: block。但我不明白如何将圆圈保持在矩形上方,以便看起来矩形的某些部分被圆形形状的圆圈切割(白色 space 介于圆形和矩形之间)。
我试过box-shadow, outline, overflow等等,但是都不行。
谁能告诉我如何设计成下图中的样子?
是这样的吗? http://codepen.io/anon/pen/VvqRep
.rectangle{
display:block;
height:40px;
width:150px;
background:red;
position:relative;
margin-top:100px;
}
.circle{
position:absolute;
height:40px;
width:40px;
border-radius:40px;
border:3px solid white;
left:50%;
margin-left:-25px;
top: -20px;
background:red;
}
"cut-off" 效果是使用圆上的边框实现的。
如果我的asnwser帮到你了,请问select好吗?谢谢
你可以试试这个:
.rectangle{
display:block;
height:50px;
width:150px;
background:red;
position:relative;
margin-top:100px;
border-top-left-radius: .5em;
border-top-right-radius: .5em;
}
.circle{
position:absolute;
height:40px;
width:40px;
border-radius:40px;
border:3px solid white;
left:50%;
margin-left:-25px;
top: -20px;
background:red;
}
#bg {
position: relative;
background: red;
width: 200px;
height: 50px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
margin-top: 50px;
}
#circle {
position: absolute;
background: red;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
top: -50px;
width: 75px;
height: 75px;
border: 3px solid #fff;
border-radius: 50%;
}
<div id="bg">
<div id="circle"></div>
</div>
看看这个:)
.base{
height:80px;
width:300px;
background:#d33;
position:relative;
margin-top:100px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.circle{
position:absolute;
height:100px;
width:100px;
border-radius:50%;
border:3px solid white;
left:50%;
margin-left:-55px;
top: -40px;
background: #d33;
}
<div class="base">
<div class="circle"></div>
</div>
使用这个:html 和 css 代码:
css:
#rectangle {
width:300px;
height:70px;
position: relative;
background: #cc0000;
border-radius: 5px 5px 0 0;
}
#rectangle #circle {
width:70px;
height:70px;
position: absolute;
top:-35px;
background:#cc0000;
border:1px solid #fff;
border-radius:70px;
left: 50%;
margin-left: -35px;
}
HTML:
<div id="rectangle">
<div id="circle"></div>
</div>