英文:
CSS - I would like to implement round (inverse) corner for texts
问题
我经常看到带有圆角设计。但我还没有看到实际的版本。我想自己实现这个，但除了使用反向边框半径之前/之后，我对实现没有任何想法。
特别是对于标题，我对此很感兴趣，其中这会自动调整，而且两行标题也没有问题。就像按钮上看到的那样，只是希望有一个文本段落。
有人对此有什么方法吗？会很高兴得到帮助。
英文:
I often see the design with the rounded corners. But I haven't seen a live version yet. I would like to implement this myself but except before/after with inverse-border-radius I have no idea for the implementation.
Especially for headings I would be interested in this, where this adjusts automatically and 2 line headings are no problem. As seen with the button, just like to have a text paragraph.
Does anyone have an approach for this. Would be happy about help
答案1
得分: 1
没有所谓的"负边框半径"。如果您知道将要使用的背景，可以使用一些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>
英文:
there is no such thing as "negative border radius". If you know what background you will be using, you can mask it with some before/after elements:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
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);
}
<!-- language: lang-html -->
<div class="big">
<div class="small">Cutted out</div>
Main content with image
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论