我怎么可以加入一个更小，更大的圆边圆角？

我现在有我的网站上两个div：我怎么可以加入一个更小，更大的圆边圆角？

current

注意两个有边框[同色格]他们也有边界半径。

我要实现这一点：

enter image description here

所以我希望他们加入。我怎样才能做到这一点？如果我能做到这一点，是纯粹的CSS和HTML足够了，还是我需要jQuery和JS？

我虽然做一个大的div两个，然后只设置一个背景是相似，两者被统一，但是这是一个不适合我，因为我有正下方的div另一个对象的2

那么我该怎么做呢？

在此先感谢。立即想到

来源

2011-11-06 Akos

将div设置为彼此相邻，并从big div的右上角和较小div的左侧删除border-radius。

#big { 
    float:left; 
    width:100px; 
    height:100px; 
    background-color:gray; 
    border-top-left-radius:10px; 
    border-bottom-left-radius:10px; 
    border-bottom-right-radius:10px; 
} 

#small { 
    float:left; 
    width:50px; 
    height:50px; 
    background-color:gray; 
    border-top-right-radius:10px; 
    border-bottom-right-radius:10px; 
}

请参阅http://jsfiddle.net/jxMW9/进行演示。

来源

2011-11-06 11:46:56 JJJ

其实我喜欢这个比我更好的结果 - 它的清洁。太好了！ –

一个想法就是给第二个div

position: relative; 
left: -40px; /* Or whatever */

这将小格向左移动。

您可以使用z-index属性来决定较大的div是应该与较小的div重叠还是相反。

来源

2011-11-06 11:45:46

你可以有这个HTML

<div id="one"> </div> 
<div id="two"> </div>

这CSS

#one { 
    height: 100px; 
    width: 150px; 
    background: #ccc; 
    float: left; 
    -webkit-border-radius: 10px; 
    -webkit-border-top-right-radius: 0; 
    -moz-border-radius: 10px; 
    -moz-border-radius-topright: 0; 
    border-radius: 10px; 
    border-top-right-radius: 0; 
} 
#two { 
    height: 50px; 
    width: 50px; 
    background: #ccc; 
    float: left; 
    -webkit-border-top-right-radius: 10px; 
    -webkit-border-bottom-right-radius: 10px; 
    -moz-border-radius-topright: 10px; 
    -moz-border-radius-bottomright: 10px; 
    border-top-right-radius: 10px; 
    border-bottom-right-radius: 10px; 
}

有此演示链接http://jsfiddle.net/nGVaa/

来源

2011-11-06 11:52:57 balsagoth

一看就定义了div float:left;并添加额外的课程，你想合并的

.merge { 
    position: relative; 
    margin-left: -10px; 
}

检查出jsfiddle

来源

2011-11-06 11:52:57

我怎么可以加入一个更小，更大的圆边圆角？

回答

相关问题