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

小提琴

我这样做的方式是：

  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

尝试如果有任何问题评论它

<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 回答
0

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

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

感谢您尝试 ppl。64 更新大声笑 :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;
}
于 2013-09-23T15:28:32.843 回答
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

使两个类的半径相同，并使高度为.rounded的一半.circle。我还更改了leftandtop值以使其对齐。

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