使用三个div来创建CSS

我想用三个div来创建轮效应的一面旗帜圆角效果，像使用三个div来创建CSS

<div class="wrapper"> 
    <div class="left-corner"></div> 
    <div class="center-repeat"></div> 
    <div class="right-corner"></div> 
</div>

的.left-corner和.right-corner有一个唯一的角落背景图片 CSS：

.wrapper 
{ 
    width:100% 
    height:110px; 
} 
.left-corner 
{ 
    background:... 
    width:110px; 
    height:110px; 
    float:left 
} 
.right-corner 
{ 
    background:... 
    width:110px; 
    height:110px; 
    float:right 
}

但我要如何呈现中间的div 我试图使用width:100%但角落里的div将推动并成为另一行我怎么能在一条线上的设置三个DIV d看起来正常吗？

来源

2012-04-27 hh54188

'border-radius'属性不工作吗？ http://www.w3schools.com/cssref/css3_pr_border-radius.asp – Nadh 2012-04-27 06:50:13

@NADH这是一个很好的选择，但你和我一样，只有新的浏览器支持这一点。如果OP的设计势在必行，他可能不希望在他的图像中出现尖角的可能性。 +1指出它虽然。 – 2012-04-27 06:52:10

你的角落有透明区域吗？ – candyleung 2012-04-27 06:53:31

如果你的wrapper是以百分比形式设定的，那么我认为最好还是让孩子保持百分比，也许使用33％，33％和34％来达到100％。对于中间的，或者center-repeat我认为你也可能需要使用float: left，所以它适合于left-corner。

来源

2012-04-27 06:49:24

就像这样 - http://jsfiddle.net/wGJjn/ – 2012-04-27 06:51:21

我想角div应该有固定的宽度和高度...... – candyleung 2012-04-27 06:52:15

@NikhilBaliga：你给我的例子有一个问题：左角和右角 - 角落不固定，我给它的背景图像是一个固定大小的图像，不重复 – hh54188 2012-04-27 06:54:11

您是否尝试过使用border-radius属性？

您可以使用任何其他角落的中心div和边框半径。
https://developer.mozilla.org/en/CSS/border-radius
Support for "border-radius" in IE

<div class="wrapper"> 
    ... content inside wrapper ... 
</div> 

.wrapper 
{ 
    width: 100%; 
    height: 110px; 
    border-radius: 5px; 
}

来源

2012-04-27 06:54:35 jao

不，我不能使用css3属性 – hh54188 2012-04-27 06:57:06

这会起作用，但正如我在上面提到的，在我的评论中，它除了在现代浏览器中都无法使用。我过去遇到的另一个问题是，如果您的整个CSS不是用CSS3编写的，那么使用'border-radius'，如果这是设计人员关心的话，那么验证将失败。 – 2012-04-27 06:57:48

嗨，我的事情你应该这样

的CSS

.wrapper 
{ 
    width:100% 
    height:110px; 
    overflow:hidden; 
    border:solid 5px black; 
    border-radius:25px; 
} 
.left-corner 
{ 
    background:red; 
    width:110px; 
    height:110px; 
    float:left 
} 
.right-corner 
{ 
    background:green; 
    width:110px; 
    height:110px; 
    float:right 
} 


.center-corner{ 
width:100%; 
    background:yellow; 
    height:110px; 
}

HTML

<div class="wrapper"> 

    <div class="left-corner">Left</div> 
    <div class="right-corner">Right</div> 
    <div class="center-corner">Center</div>  
</div>

现场演示http://jsfiddle.net/pTxrW/

来源

2012-04-27 07:45:35

这里是我的尝试：jsfiddle。
左右拐角的高度比中心块低10px，因此更容易看到它们之间的边界。

来源

2012-04-27 08:57:14

使用三个div来创建CSS

回答

相关问题