问题描述
我正在尝试创建此进度条,但由于它具有边框半径和每个子进度元素不同的边框颜色,所以很难。
这是我到目前为止所取得的成就,其中不包括边框: Codepen
WITH t(json_extracted,str) AS
(
SELECT JSON_VALUE (JSONDetail,'$.comment'),SUBSTRING(
JSONDetail,PATINDEX('%"comment"%',JSONDetail),PATINDEX('%"contacts"%',JSONDetail)-PATINDEX('%"comment"%',JSONDetail)
)
FROM tab
),t2(json_extracted,str) AS
(
SELECT json_extracted,TRIM(
SUBSTRING( str,PATINDEX('%:%',str) + 1,PATINDEX('%,%',str) - PATINDEX('%:%',str) - 1 ) )
FROM t
)
SELECT SUBSTRING(str,2,LEN(str)-2) AS extracted_comment,CASE WHEN json_extracted = SUBSTRING(str,LEN(str)-2)
THEN
'No'
ELSE
'Yes'
END AS "is_it_corrupted"
FROM t2
body {
display: flex;
justify-content: center;
}
.progress-bar {
height: 24px;
width: 280px;
background: #eaeaea;
border-radius: 16px;
display: flex;
overflow: hidden;
}
.progress-bar-fill-1 {
width: 30%;
background: #F16172;
Box-sizing: border-Box;
border-right: 1px solid white;
}
.progress-bar-fill-2 {
width: 20%;
background: #31C4F3;
Box-sizing: border-Box;
border-right: 1px solid white;
}
例如,如果我尝试向<div class="progress-bar">
<div class="progress-bar-fill-1"></div>
<div class="progress-bar-fill-2"></div>
</div>
添加边框,则边框不会出现在角落。
请注意,我事先不知道百分比值,因此无法通过在第一个进度元素中添加.progress-bar-fill-1
来解决问题。
谢谢
解决方法
body {
display: flex;
justify-content: center;
}
.progress-bar {
height: 24px;
width: 280px;
background: #eaeaea;
border-radius: 16px;
display: flex;
overflow: hidden;
}
.progress-bar-fill-1 {
position: relative;
width: 30%;
z-index: 1;
}
.progress-bar-fill-1:before {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
content: "";
background: #F16172;
box-sizing: border-box;
border-right: 1px solid white;
border: 1px solid black;
border-radius: 16px;
}
.progress-bar-fill-2 {
width: 20%;
position:relative;
}
.progress-bar-fill-2:before {
position: absolute;
left: -16px;
right: 0;
top: 0;
bottom: 0;
content: "";
background: #31C4F3;
box-sizing: border-box;
border-right: 1px solid white;
border-radius: 16px;
}
请检查结果。 您使用了flex。因此我们无法将边距添加到第二个div。
,具有剪切路径,伪元素和一些CSS变量,您可以轻松地使用一个元素进行此操作。诀窍是让3个元素彼此重叠(主要元素和2个伪元素),然后剪切伪元素以仅显示所需的部分:
.progress-bar {
--b:2px; /* boder width */
--s:2px; /* space between progress */
height: 30px;
width: 300px;
margin:5px;
background: #eaeaea;
border-radius: 20px;
position:relative;
border:var(--b) solid grey;
position:relative;
}
.progress-bar::before,.progress-bar::after{
content:"";
border-radius:inherit;
border:inherit;
box-sizing: border-box;
position:absolute;
top:calc(-1*var(--b));
left:calc(-1*var(--b));
bottom:calc(-1*var(--b));
right:calc(-1*var(--b));
}
.progress-bar::before {
background: #F16172;
border-color:red;
clip-path:inset(0 calc(100% - var(--f1)) 0 0);
}
.progress-bar::after {
background: #31C4F3;
border-color:blue;
clip-path:inset(0 calc(100% - var(--f1) - var(--f2)) 0 calc(var(--f1) + var(--s)));
}
<div class="progress-bar" style="--f1:30%;--f2:20%;"></div>
<div class="progress-bar" style="--f1:50%;--f2:20%;--b:3px;"></div>
<div class="progress-bar" style="--f1:60%;--f2:10%;--s:5px"></div>
<div class="progress-bar" style="--f1:20%;--f2:70%;--b:1px"></div>
<div class="progress-bar" style="--f1:20%;--f2:80%;--s:10px"></div>
,
为什么会出现此问题:
父元素使用Server:
Containers: 6
Running: 3
Paused: 0
Stopped: 3
Images: 185
Server Version: 19.03.12
Storage Driver: overlay
Backing Filesystem: extfs
Supports d_type: true
Logging Driver: json-file
Cgroup Driver: cgroupfs
Plugins:
Volume: local
Network: bridge host ipvlan macvlan null overlay
Log: awslogs fluentd gcplogs gelf journald json-file local logentries splunk syslog
Swarm: inactive
Runtimes: runc nvidia
Default Runtime: runc
Init Binary: docker-init
containerd version: 7ad184331fa3e55e52b890ea95e65ba581ae3429
runc version: dc9208a3303feef5b3839f4323d9beb36df0a9dd
init version: fec3683
Security Options:
seccomp
Profile: default
Kernel Version: 5.7.2-kd-cluster
Operating System: Debian GNU/Linux 9 (stretch)
OSType: linux
Architecture: x86_64
CPUs: 32
Total Memory: 125.8GiB
Name: dpl01
ID: KBGO:2E6L:NIHR:UQAL:K5CN:XWBI:R7TK:WWZF:MZBT:BCHE:HUQW:UKKM
Docker Root Dir: /data/docker
Debug Mode: false
Registry: https://index.docker.io/v1/
Labels:
Experimental: false
Insecure Registries:
127.0.0.0/8
Live Restore Enabled: false
和overflow: hidden;
。导致具有圆角的父元素并将其中的所有内容屏蔽到父元素的原因。
由于子元素(又名border-radius: 16px;
)最初是正方形,因此边框也将变为正方形。但是子元素的开头/开头将被其父元素掩盖并发生溢出。
为此,解决方案是也将第一个子元素四舍五入到被屏蔽的父元素中,如下所述。
解决方案:
您还必须在第一个子元素上添加边框半径。也称为.progress-bar-fill-1
到border-radius: 0 0 16px 16px 0;
,如下例所示。
固定的代码示例:
.progress-bar-fill-1
body {
display: flex;
justify-content: center;
}
.progress-bar {
height: 24px;
width: 280px;
background: #eaeaea;
border-radius: 16px;
display: flex;
overflow: hidden;
}
.progress-bar-fill-1 {
width: 30%;
background: #F16172;
box-sizing: border-box;
border-right: 1px solid white;
border-radius: 0 0 16px 16px 0;
}
.progress-bar-fill-2 {
width: 20%;
background: #31C4F3;
box-sizing: border-box;
border-right: 1px solid white;
}
,
如果我将其添加到.progress-bar-fill-1
:
border-top-left-radius: 16px;
border-bottom-left-radius: 16px;
例如,在.progress-bar-fill-1
很小的情况下,.progress-bar-fill-2
的边界也会有同样的问题,因此仍然无法解决问题。.因此,我需要一个更通用的解决方案因为我需要用它来创建一个React组件。
body {
display: flex;
justify-content: center;
}
.progress-bar {
height: 24px;
width: 500px;
background: #eaeaea;
border-radius: 16px;
display: flex;
overflow: hidden;
}
.progress-bar-fill-1 {
width: 1%;
background: #F16172;
box-sizing: border-box;
border-right: 1px solid white;
border: 1px solid black;
border-top-left-radius: 16px;
border-bottom-left-radius: 16px;
}
.progress-bar-fill-2 {
width: 20%;
background: #31C4F3;
box-sizing: border-box;
border-right: 1px solid white;
border: 1px solid blue;
border-left: none;
}
<div class="progress-bar">
<div class="progress-bar-fill-1"></div>
<div class="progress-bar-fill-2"></div>
</div>
,
我已经稍微修改了您的代码。 1%时看起来效果不佳,但2%等等看起来就像设计一样。
body {
display: flex;
justify-content: center;
}
.progress-bar {
height: 24px;
width: 500px;
background: #eaeaea;
border-radius: 16px;
display: flex;
overflow: hidden;
}
.progress-bar-fill-1 {
width: 2%;
background: #F16172;
box-sizing: border-box;
border-right: 1px solid white;
border-top: 1px solid red;
border-bottom: 1px solid red;
border-left: 1px solid red;
border-top-left-radius: 16px;
border-bottom-left-radius: 16px;
}
.progress-bar-fill-2 {
width: 20%;
background: #31C4F3;
box-sizing: border-box;
border-top: 1px solid blue;
border-bottom: 1px solid blue;
border-right: 1px solid white;
border-left: none;
}
<div class="progress-bar">
<div class="progress-bar-fill-1"></div>
<div class="progress-bar-fill-2"></div>
</div>
,
我设法找到了一种解决方案,该解决方案还支持IE11(包括IE11),并包含动画幻灯片: https://jsfiddle.net/5kphcLqg/
@keyframes slideInFill {
0% {
width: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
99% {
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
}
100% {
border-top-right-radius: 16px;
border-bottom-right-radius: 16px;
}
}
@keyframes slideInBorder {
from {
width: 0;
}
}
.container {
position: relative;
}
.borders {
height: 24px;
width: 280px;
background: #DCDFDF;
display: flex;
border-radius: 16px;
overflow: hidden;
position: absolute;
top: 0;
box-sizing: border-box;
}
.borders-fill-1 {
position: relative;
width: 20%;
background: #06A2D4;
}
.animate {
height: 24px;
top: 0;
animation: slideInBorder 1s ease-in forwards;
}
.borders-fill-1:after {
content: '';
position: absolute;
height: 100%;
width: 1px;
background: white;
right: 0;
z-index: 9
}
.borders-fill-2:after {
content: '';
position: absolute;
height: 100%;
width: 1px;
background: white;
right: 0;
z-index: 9
}
.borders-fill-2 {
width: 78%;
background: #D31A47;
position: relative;
}
.fill-bg {
background: #eaeaea;
width: 280px;
height: 24px;
position: absolute;
border-radius: 16px;
background-clip: content-box;
padding: 1px;
box-sizing: border-box;
}
.filling-wrapper {
border-radius: 16px;
width: 280px;
height: 24px;
position: absolute;
overflow: hidden;
border-right: 1px solid #D31A47;
}
.filling {
width: 280px;
height: 24px;
position: absolute;
background: linear-gradient(to right,#31C4F3 20%,#F16172 20%,#F16172 98%,transparent 98%
);
animation: slideInFill 1s ease-in forwards;
border-top-left-radius: 16px;
border-bottom-left-radius: 16px;
padding: 1px;
background-clip: content-box;
box-sizing: border-box;
}
<div class="container">
<div class="borders">
<div class="borders-fill-1 animate"></div>
<div class="borders-fill-2 animate"></div>
</div>
<div class="fill-bg"></div>
<div class="filling">
</div>
</div>