Как слить два divs

Question

У меня есть два divs, которые должны выглядеть как одна фигура. Проблема заключается в границе кругового блока. См. Рис. ниже. CSS были добавлены ниже

#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); 
} 

Answer 1

Может быть, попробовать что-то вроде этого: http://jsfiddle.net/VNAZA/

Использует две дивов: один с только границами, которая получает слоистые под прямоугольником, а другой с фактическим содержанием, отводки над прямоугольником. Таким образом, вы можете также применить тэг css box к нижнему div.

HTML:

<div class="container"> 
    <div class="rect"></div> 
    <div class="round_content">x</div> 
    <div class="round_border"></div> 
</div> 

CSS:

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

Answer 2

Это не возможно с помощью CSS.

Решение A) включает в себя графику, используемую в качестве фона и решения B) использует слой за вертикальной полосой для рисования овала, второй слой для самого бара и третий DIV для X и его ссылки.

Answer 3

Использование 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; 
    ... 
} 

Это не слияние, но результат тот же.