英文:
CSS partial border with rounded caps
问题
我正在尝试创建一个带有圆角端部的部分边框矩形，就像下面的图片一样：
我已经做到了移除边框的一部分。但我无法想出如何轻松地获得图片中的结果：
body {
position: relative;
}
div.inner {
position: absolute;
top: 10px;
left: 10px;
display: inline-block;
width: 420px;
height: 320px;
background-color: #f80;
border-radius: 40px;
}
div.border {
position: absolute;
display: inline-block;
width: 400px;
height: 300px;
background-color: transparent;
border-radius: 40px;
border: 20px solid black;
clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%, 60% 0%, 60% 75%, 25% 75%, 25% 0%);
}
<body>
<div class="inner"></div>
<div class="border"></div>
</body>
英文:
I am trying to create a rectangle with partial borders with rounded caps. Like the image below:
I have come this far to remove a part of the border. But I can't think of an easy way to get the result in the picture:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
body {
position: relative;
}
div.inner {
position: absolute;
top: 10px;
left: 10px;
display: inline-block;
width: 420px;
height: 320px;
background-color: #f80;
border-radius: 40px;
}
div.border {
position: absolute;
display: inline-block;
width: 400px;
height: 300px;
background-color: transparent;
border-radius: 40px;
border: 20px solid black;
clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%, 60% 0%, 60% 75%, 25% 75%, 25% 0%);
}
<!-- language: lang-html -->
<body>
<div class="inner"></div>
<div class="border"></div>
</body>
<!-- end snippet -->
答案1
得分: 1
这是一个使用一个元素的想法。它可能看起来复杂，但你只需要调整CSS变量。
.box {
--t: 20px; /* 边框厚度 */
--c: #000; /* 边框颜色 */
--x: 30%; /* 间隙的起始位置 */
--y: 60%; /* 间隙的结束位置 */
margin: 50px;
width: 300px;
height: 200px;
background: orange; /* 背景颜色 */
position: relative;
border-radius: 40px; /* 圆角半径 */
}
/* 以下部分无需修改 */
.box:before {
content: "";
position: absolute;
inset: calc(var(--t)/-2);
border-radius: inherit;
padding: var(--t);
--g: calc(var(--t)/2), var(--c) 49%, #0000 51%;
background:
radial-gradient(var(--t) at var(--x) var(--g)),
radial-gradient(var(--t) at var(--y) var(--g)),
linear-gradient(90deg,var(--c) var(--x),#0000 0 var(--y),var(--c) 0),
linear-gradient(var(--c) 0 0) 0 var(--t) no-repeat;
-webkit-mask:
linear-gradient(#000 0 0),
linear-gradient(#000 0 0) content-box;
-webkit-mask-composite: xor;
mask-composite: exclude;
}
<div class="box"></div>
<div class="box" style="--t: 26px; --x: 50px; --y: 80%"></div>
英文:
Here is an idea using one element. It may look complex but all you have to do is to adjust the CSS variables
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.box {
--t: 20px; /* border thickness */
--c: #000; /* border color */
--x: 30%; /* the start of the gap */
--y: 60%; /* the end of the gap */
margin: 50px;
width: 300px;
height: 200px;
background: orange; /* background color */
position: relative;
border-radius: 40px; /* radius */
}
/* you don't need to touch the below*/
.box:before {
content:"";
position: absolute;
inset: calc(var(--t)/-2);
border-radius: inherit;
padding: var(--t);
--g: calc(var(--t)/2), var(--c) 49%,#0000 51%;
background:
radial-gradient(var(--t) at var(--x) var(--g)),
radial-gradient(var(--t) at var(--y) var(--g)),
linear-gradient(90deg,var(--c) var(--x),#0000 0 var(--y),var(--c) 0),
linear-gradient(var(--c) 0 0) 0 var(--t) no-repeat;
-webkit-mask:
linear-gradient(#000 0 0),
linear-gradient(#000 0 0) content-box;
-webkit-mask-composite: xor;
mask-composite: exclude;
}
<!-- language: lang-html -->
<div class="box"></div>
<div class="box" style="--t: 26px;--x: 50px;--y: 80%"></div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论