0

I have 2 divs with some content. One "box" and one "circle" now I want to make them look like one figure only. Something like a box with a circled part at the bottom center. Hard to explain it in words I guess showing up some code is way better.

The markup:

<div class="box">content</div>
<div class="circle">content</div>

The CSS:

.box {
    width: 500px;
    height: 700px;
    margin: 0 auto;
    background: green;
    border: 1px solid blue;
}

.circle {
    width: 100px;
    height: 100px;
    margin: -50px auto 0 auto;
    background: white;
    border-radius: 50%;
    box-shadow: 0 0 0 10px green,
                            0 0 0 11px blue;
}

Now I want to cut off the upper part of the circle's border(shadow). Anyone knows how to get this done? Perhaps there's also another (better) way to do this?

Thanks a lot

Patrick
  • 25
  • 3

1 Answers1

0

I am not completly sure if I exactly understood what it should look like. What I did is that I only drew half of the circle and then masked out the upper blue line of the border shadow.

I also found another stackoverflow question here that solves a similar problem. 

    .box {
        width: 500px;
        height: 700px;
        margin: 0 auto;
        background: green;
        border: 1px solid blue;
    }

    .circle {
        width: 100px;
        height: 50px;
        margin: 10px auto 0 auto;
        background: white;
        border-radius:0 0 100px 100px;
        box-shadow: 0 0 0 10px green, 0 0 0 11px blue;
    }

    .mask {
        position:absolute;
        width:120px;
        height: 1px;
        background-color:green;
        left:50%;
        right:50%;
        transform:translateX(-50%);
        top:709px;
    }
    <div class="mask"></div>
    <div class="box">content</div>
    <div class="circle">content</div>
Community
  • 1
  • 1
Bee
  • 1,306
  • 2
  • 10
  • 24
  • By giving a top margin of just 5px to the circle I don't need to mask the upper border cause it's the same color like the box. Now the problem with that is that I want to change the "background white" to an rounded bg image and this would be cut. But thank you anyway. I can also place the picture absolutely on top of this "figure" – Patrick Nov 22 '15 at 01:15
  • Oh ok I should give it a try first. I do need the mask you are right. – Patrick Nov 22 '15 at 01:19
  • Do you have a graphic mock-up of the wished appearance of the box? I am still not sure if I know what it should look like in the end. – Bee Nov 22 '15 at 01:56
  • Can't post an image. I'm too new in this :) but I solved it with your fix. Half circle with the box-shadow and a top margin of 5px. The mask I've putted into the .box div and placed it bottom -1px to mask this piece of border and placed a rounded image absolutely on top of this shape/figure – Patrick Nov 22 '15 at 02:09