5

I have two divs which should looks like one figure. The problem is with the border of the circular block. See pic. below. css were added below

input and output needed

#nameWidgeteMain {
  width: 279px;
  height: 400px;
  top: 0px;
  position: absolute;
  background-color: rgb(237,237,237);
  border: 1px solid #dbe0e3;
  box-shadow: 0 0 20px rgba(0,0,0,0.08)
}
.nameWidgeteCloseArea {
  position: absolute;
  width: 22px;
  height: 31px;
  top: 7px;
  left: 270px;
  background-color: rgb(237,237,237);
  color: white;
  border: 1px solid #dbe0e3;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  border-bottom-right-radius: 50%;
  border-bottom-left-radius: 50%;
  text-align: center;
}

#nameWidgeteCloseTitle {
  padding-top: 5px;
  left: auto;
  font-family: sans-serif;
  font-size: 12pt;
  color: rgb(158, 158, 158);
}
3
  • 1
    is the round effect just for the drawing or not ? There is no way to 'merge' but you can use some trickery like a 0-sized border on the left.
    – BiAiB
    Jun 25, 2012 at 13:47
  • yes, I will try to play with this side of the border.
    – Vasya
    Jun 25, 2012 at 13:52
  • You could have a go with the z-index. Have the round div "under" the vertical line and then another div for the content.
    – SpaceBeers
    Jun 25, 2012 at 13:53

3 Answers 3

7

Maybe try something like this: http://jsfiddle.net/VNAZA/

Uses two divs: one with just the border, which gets layered under the rectangle and another with the actual content, layering over the rectangle. This way you can also apply css box-shadow to the lower div.

.container{
        position:relative;
        width: 50px;
        height: 150px;
    }
    
    .rect{
        position:absolute;
        width: 50px;
        height: 150px;
        background: #eee;
        border: 1px solid #000;
        z-index: 5;
        -webkit-box-shadow: 2px 2px 10px 2px #cccccc;
        box-shadow: 2px 2px 10px 2px #cccccc;
    }
    
    .round_content{
        position: absolute;
        top: 50px;
        right: -25px;
        width: 50px;
        line-height: 50px;
        background: #eee;
        z-index: 6;
        text-align:center;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
    }
    
    .round_border{
        position: absolute;
        top: 49px;
        right: -26px;
        width: 52px;
        height: 50px;
        line-height: 52px;
        border: 1px solid #000;
        z-index: 4;
        text-align: center;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        -webkit-box-shadow: 2px 2px 10px 2px #cccccc;
        box-shadow: 2px 2px 10px 2px #cccccc;
    }
    <div class="container"> 
      <div class="rect"></div>
      <div class="round_content">x</div>
      <div class="round_border"></div>
    </div>

1

This is not possible with CSS.

Solution A) involves graphics used as background and solution B) uses a layer behind the vertical bar to draw the oval, a second layer for the bar itself and a third DIV for the X and it's link.

3
  • Surely the second solution IS CSS.
    – SpaceBeers
    Jun 25, 2012 at 13:56
  • 2
    Sorry, I meant you can't "merge" two borders into one using CSS. The second solution is a workaround to achieve an optical equivalent to what was desired…
    – feeela
    Jun 25, 2012 at 13:57
  • Ah ok. That makes more sense.
    – SpaceBeers
    Jun 25, 2012 at 13:58
-1

Use z-index property.

#nameWidgeteMain, #nameWidgeteMain2 {
  width: 279px;
  height: 400px;
  top: 0px;
  position: absolute;
  background-color: rgb(237,237,237);
  box-shadow: 0 0 20px rgba(0,0,0,0.08)
}

#nameWidgeteMain2 {
  z-index: -2;
  border: 1px solid #dbe0e3;
}

.nameWidgeteCloseArea {
  z-index: -1;
  ...
}

This is not merging but the result is the same.

2
  • But now first div border will be visible.
    – Vasya
    Jun 25, 2012 at 14:00
  • You're right. You may add another div identical to #nameWidgeteMain with borders and z-index: -2 and remove borders from #nameWidgeteMain.
    – collimarco
    Jun 25, 2012 at 14:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.