Question

我正在尝试将边框与圆圈对齐，使其看起来像是在那里剪裁。

这是一个例子： 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;
}

有没有办法实际剪辑左上角？

感谢。

Answer 1

试试这个

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

Answer 2

Fiddle

我这样做的方式是：

将<div class="rounded"></div>放在<div class="circle">
如果您想将position: absolute保留在.rounded，请将position: relative添加到父.circle
将overflow: hidden添加到父级，以便剪切子级。
从孩子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;
}

Answer 3

使两个类的半径相同，并使.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/。

希望这有帮助！

Answer 4

我认为Kai是正确的，但是如果你不想触摸圆圈的顶部，这是我用红色方框的固定高度做的最好的。

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

Answer 5

尝试任何问题评论

<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>

Answer 6

让它工作，但有一个技巧。

以下是答案： http://jsfiddle.net/Beck/P63VY/64/

感谢您尝试ppl。 64次更新lol：D

<div id="rounded1" class="rounded"></div>
<div class="circle">
    <div class="rounded"></div>
</div>
<div id="text">blah blah blah blah blah blah</div>

.circle {
    width:150px;
    height:150px;
    border-radius:82px;
    border:7px solid black;
    overflow:hidden;
}
.rounded {
    position: relative;
    top: 23px;
    left:-3px;
    background:red;
    width: 400px;
    height: 50px;
}
#rounded1 {
    position:absolute;
    top:38px;
    left:40px;
    background:red;
}
#text {
    position:absolute;
    top:38px;
    line-height:50px;
    padding-left:20px;
    font-size:30px; 
    color:white;
}

CSS：将边框与圆圈对齐

6 个答案:

HTML

CSS