Search code examples
htmlcsscss-shapes

Circle over a rectangle using CSS

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

enter image description here

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 the 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 it like it is in the below image?

Solution

  • 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