Question

我想使用三个div创建一个圆形效果，比如

<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并且看起来正常？

Answer 1

如果您的wrapper设置为百分比，那么我认为最好还是保持其子女的百分比，也许使用33％，33％和34％来获得100％。对于中间或center-repeat，我认为您可能也需要使用float: left，因此它最贴近left-corner。

Answer 2

您是否尝试过使用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;
}

Answer 3

嗨，我应该这样做

<强>的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/

Answer 4

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

使用三个div在css中创建横幅圆角效果

4 个答案: