Circle over a rectangle using CSS [closed]

问题:

I want to design a shape as similar as the following image(effect between circle and rectangle):

I know the circle shape is designed using border-radius and the rectangle like shape is designed with some unordered list having style display: block. But I can't understand how to keep the circle over rectangle so that it looks like that some portion of the rectangle is cut down by the circle in a circle shape ( white color space between circle and rectangle).

I have tried box-shadow, outline, overflow and etc, but it is not working.
Can anyone tell me how can I design a shape as like as the image? - Thanks

回答1:

Something like this? 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;
}

the "cut-off" effect is achieved using a border on the circle.

If my asnwser helped you out, can you please select it? thanks

回答2:

you can try this one:

.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;
}

DEMO HERE

回答3:

Check this out :)

.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>

回答4:

#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>

回答5:

use this: html and css code:

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>