向元素的选定拐角添加圆角边框 [英] Add rounded borders to selected corners of an element
本文介绍了向元素的选定拐角添加圆角边框的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我如何使用纯CSS建立类似这样的东西?
How could I go about constructing something like this with pure CSS?
这是我到目前为止的距离:小提琴
This is how far I've gotten so far: Fiddle
即使我继续添加额外的 span
,我也在努力寻找这个圆角。
I'm struggling with how to get that rounded corner there, even if I continue to add additional span
s.
body {
background: #000;
}
.container {
position: relative;
width: 300px;
height: 150px;
margin: 10% auto;
}
.top-right {
position: absolute;
top: -10px;
right: 0;
width: 50px;
height: 1px;
background: white;
border-radius: 5px;
}
.box {
width: 100%;
height: 100%;
background: red;
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
}
h3 {
color: white;
}
推荐答案
伪元素 ::
:: 之前的 /
>使用属性
border
和 border-radius
body {
background: #000;
}
.container {
width: 300px;
height: 150px;
margin: 3% auto 0 /* changed for demo */
}
h3 {
color: white;
}
.box {
width: 100%;
height: 100%;
background: red;
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.box::before,
.box::after {
content: "";
position: absolute;
border: solid white;
width: 50px;
height: 50px;
}
.box::before {
top: -15px;
left: -15px;
border-radius: 15px 0; /* top-left */
border-width: 5px 0 0 5px;
}
.box::after {
bottom: -15px;
right: -15px;
border-radius: 0 0 15px; /* bottom-right */
border-width: 0 5px 5px 0;
}
<div class="container">
<div class="box">
<h3>Content</h3>
</div>
</div>
这篇关于向元素的选定拐角添加圆角边框的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文