使用三個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

回答

相關問題