CSS -我想实现圆(反)角的文本[关闭]

lyfkaqu1  于 2023-06-25  发布在  其他
关注(0)|答案(1)|浏览(111)

已关闭,此问题需要details or clarity。目前不接受答复。
**想改善这个问题吗?**通过editing this post添加详细信息并澄清问题。

23小时前关闭
Improve this question
我经常看到圆角的设计。但我还没看过现场版。我想自己实现这个,但除了与inverse-border-radius之前/之后,我不知道实现。
特别是对于标题,我会感兴趣,在这里,这自动调整和2行标题是没有问题的。如用按钮看到的,就像有一个文本段落。
有没有人对此有办法。会很乐意接受帮助

w46czmvw

w46czmvw1#

不存在所谓的“负边界半径”。如果你知道你将使用什么背景,你可以用一些before/after元素来掩盖它:

body{
background: #aaa;
padding: 60px;
}
.big{
background: #fff;
padding: 100px;
border-radius: 10px;
position: relative;
}
.small{
position:absolute;
top: 0;
left: 0;
padding: 20px;
border-radius: 10px;
background: #888;
outline: 10px solid #aaa;
}
.small:before{
content: "";
position:absolute;
top: 0;
right: -20px;
width: 20px;
height: 10px;
background: radial-gradient(circle at 100% 100%, transparent 10px, #aaa 10px);
}
.small:after{
content: "";
position:absolute;
left: 0;
bottom: -20px;
width: 10px;
height: 20px;
background: radial-gradient(circle at 100% 100%, transparent 10px, #aaa 10px);
}
<div class="big">

<div class="small">Cutted out</div>
Main content with image
</div>

相关问题