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

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

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

但是我应该如何渲染中间的div呢 我尝试使用

width:100%

，但角div将被推到另一行

---

如何设置一行中的三个div并使其看起来正常？

如果您的

wrapper

设置为百分比，那么我认为最好将其子项也设置为百分比，可能使用33%、33%和34%来获得100%。对于中间，或

中心重复

我认为您可能还需要使用

float:left

，因此它会一直延伸到

左角

您尝试过使用border radius属性吗？

您只需使用中心div和边界半径就可以了。

... 包装内的内容。。。
.包装纸
{
宽度：100%；
高度：110px；
边界半径：5px；
}

你好，我想你应该

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>

左边
赖特
居中

现场演示

这是我的尝试：。

---

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

边界半径属性不起作用吗@NADH这是一个很好的选择，但你和我都知道，只有更新的浏览器支持这一点。如果OP的设计是必须的，他可能不希望自己的形象出现锐角+你的角有透明区域吗？在上面的代码中，你有两类

左角

。希望这在这个网站上是一个打字错误，而不是在实际的CSS中。如果是，您需要在代码中修复它，否则您将永远无法让它工作properly@JT史密斯：那是个错误，另一个是对的-corner@NikhilBaliga：你给我的例子有一个问题：左角和右角没有固定，我给它的背景图像是固定大小的图像，没有repeat@Candy说得好，那么，也许中间应该是100%，以填补双方之间的差距？@NikhilBaliga感谢您帮助拉小提琴。我试图制作一个，但想不出要使用的图像。。。没有考虑使用背景颜色来显示对齐方式。谢谢+1@hh54188那么你的图像的固定宽度是多少？您在上面的示例中提供的信息很少。小提琴是用来显示你的3个div的相对排列，它确实如此。使用这些通用准则，您应该能够对齐所有3个div，无论它们是固定宽度还是相对宽度。如果您需要固定的div宽度，则使用

px

，但如图所示，按原样使用浮点数可以得到您想要的结果。如果你的图像是固定宽度的，也许你也应该使用固定宽度的容器？这将有助于你的布局打破这将工作，但正如我在上面的评论中提到的，它不会工作，除非在现代浏览器。我在过去遇到的另一个问题是，如果您的整个CSS不是用CSS3编写的，那么使用

border radius

验证将失败，如果这是设计师关心的问题。

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

<div class="wrapper">

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