0

3つの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がプッシュされて別の行になり、3つのdivを1行に設定して正常に見えるようにするにはどうすればよいですか?

4

4 に答える 4

0

こんにちは私はあなたがこれをすべきだと思います

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-27T07:45:35.520 に答える
0

これが私の試みです：jsfiddle。
左右の角は中央のブロックよりも高さが10ピクセル低いため、それらの間の境界線が見やすくなっています。

于 2012-04-27T08:57:14.570 に答える
0

border-radius プロパティを使用してみましたか?

中央のdivと境界線の半径を他のコーナーで使用できます。
https://developer.mozilla.org/en/CSS/border-radius
IE での「border-radius」のサポート 

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

.wrapper
{
    width: 100%;
    height: 110px;
    border-radius: 5px;
}
于 2012-04-27T06:54:35.793 に答える
0

If your wrapper is set in percentages, then I would think it best to keep it's children in percentages as well, perhaps use a 33%, 33% and 34% to get the 100%. For the middle, or center-repeat I think you may need to use float: left as well, so it snugs up to the left-corner.

于 2012-04-27T06:49:24.553 に答える