2

境界線を円に合わせて、そこで切り取られたように見せようとしています。

以下に例を示します: http://jsfiddle.net/Beck/P63VY/1/

<div class="circle">
</div>
<div class="rounded"></div>

.circle {
    width:150px;
    height:150px;
    border-radius:82px;
    border:7px solid black;
}
.rounded {
    position: absolute;
    left: 22px;
    top: 23px;
    border: 1px solid red;
    border-radius: 62px/66px 0px 0px 0px;
    width: 200px;
    height: 50px;
}

その左上隅を実際にクリップする方法はありますか?

ありがとう。

4

6 に答える 6

0

これを試して 

.circle {
    width:150px;
    height:150px;
    border-radius:82px;
    border:7px solid black;
}
.rounded {
    position: absolute;
    left: 18px;
    top: 15px;
    border: 1px solid red;
    border-radius:72.5px;
    width: 145px;
    height: 145px;
}
</style>

<div class="circle">
<div class="rounded"></div>
</div>
于 2013-09-23T13:30:28.390 に答える
0

フィドル

私がやった方法は次のとおりです。

  1. <div class="rounded"></div>の中に置く<div class="circle">
  2. position: absoluteinを保持したい場合は、親.roundedに追加しますposition: relative.circle
  3. overflow: hidden親に追加して、子がクリップされるようにします。
  4. 不要になったためborder-radius、子からすべてを削除します。.rounded

HTML

<div class="circle">
    <div class="rounded"></div>
</div>

CSS

.circle {
    width:150px;
    height:150px;
    border-radius:82px;
    border:7px solid black;

    /* These were added: */
    overflow:hidden;
    position:relative;
}
.rounded {
    position: absolute;
    top: 10px;
    border: 1px solid red;
    width: 200px;
    height: 50px;
}
于 2013-09-23T13:35:35.557 に答える
0

両方のクラスで半径を同じにし、 の高さを の高さの.rounded半分にし.circleます。leftまた、との値を変更しtopて調整しました。

HTML

<div class="circle"></div>
<div class="rounded"></div>

CSS

.circle {
    width:150px;
    height:150px;
    border-radius:82px;
    border:7px solid black;
}
.rounded {
    position: absolute;
    left: 12px;
    top: 12px;
    border: 1px solid red;
    border-radius: 82px 0px 0px 0px;
    width: 200px;
    height: 75px;
}

ここにフィドルがあります: http://jsfiddle.net/Xs2Mr/。

お役に立てれば！

于 2013-09-23T13:35:53.763 に答える
0

何か問題があればコメントしてみてください

<style>

.circle {
   border: 7px solid black;
    border-radius: 82px 82px 82px 82px;
    height: 150px;
    margin-left: 1px;
    width: 150px;
}
.rounded {
    border: 1px solid red;
    border-radius: 60px 0 0 0;
    font-size: 30px;
    height: 50px;
    left: 20px;
    line-height: 46px;
    padding-left: 20px;
    position: absolute;
    top: 22px;
    font-size:30px;
}
</style>
<div class="circle">
</div>
<div class="rounded">blah blah blah blah blah blah</div>
于 2013-09-23T13:53:19.143 に答える
0

カイはそれを正しく行ったと思いますが、円の上部に触れたくない場合は、赤いボックスの固定高さで私ができる最善の方法を次に示します.

http://jsfiddle.net/P63VY/18/

.circle {
    width:150px;
    height:150px;
    border-radius:82px;
    border:7px solid black;
}
.rounded {
    position: absolute;
    left: 20px;
    top: 23px;
    border: 1px solid red;
    border-radius: 150px / 160px 0px 0px 0px;
    width: 200px;
    height: 50px;
}
于 2013-09-23T13:39:34.560 に答える