<div class="line-wrap">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="line"></div>
</div>
.line-wrap {
position: relative;
margin-left: 15px;
margin-top: 70px;
display: inline-flex;
width: 20px;
height: 120px;
.circle {
position: absolute;
width: 10px;
height: 10px;
border: 1px solid @primary-color;
border-radius: 50%;
z-index: 1;
&::after {
content: '';
position: absolute;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
width: 4px;
height: 4px;
border-radius: 50%;
background-color: @primary-color;
}
}
.circle:nth-child(1) {
top: 0;
left: 0;
transform: translateY(-35%) translateX(-50%);
}
.circle:nth-child(2) {
top: 50%;
right: 0;
transform: translateX(35%);
}
.circle:nth-child(3) {
left: 0;
bottom: 0;
transform: translateY(35%) translateX(-50%);
}
.line {
width: 100%;
height: 100%;
border: 1px solid @primary-color;
border-radius: 0 100% 100% 0/50%;
border-left: none;
}
}
这段CSS代码定义了一个元素的样式,我们可以逐行解析它的作用:
csswidth: 100%;
这行代码设置元素的宽度为其父容器宽度的100%,意味着元素会尽可能地占据其父容器的全部宽度。
cssheight: 100%;
这行代码设置元素的高度为其父容器高度的100%,意味着元素会尽可能地占据其父容器的全部高度。
cssborder: 1px solid @primary-color;
这行代码设置了元素的边框样式。它定义了一个1像素宽的实线边框,颜色由@primary-color
变量决定。@primary-color
通常是一个在CSS预处理器(如Sass或Less)中定义的变量,它会在编译时替换为具体的颜色值。
cssborder-radius: 0 100% 100% 0/50%;
这行代码设置了元素的边框圆角。它使用了四个值来分别定义左上角、右上角、右下角和左下角的圆角半径。这里,左上角的半径是0(无圆角),右上角的半径是100%(完全圆角),右下角的半径也是100%(完全圆角),而左下角的半径是0(无圆角)。此外,斜杠后面的50%
定义了水平方向上的圆角半径,这意味着水平方向上的圆角将是元素宽度的一半。这种设置通常用于创建特殊的形状,如半圆形或椭圆形。
cssborder-left: none;
这行代码将元素的左边框设置为无,即移除了左边框。
综合这些样式,元素将呈现为一个特殊的形状,其右侧和底部有完整的边框,左侧无边框,且右上角和右下角为完全的圆角,形成了一个类似“C”形状的视觉效果。同时,由于border-radius
的水平半径设置为50%,元素在水平方向上将呈现出一个半圆形的外观。如果@primary-color
是一个鲜明的颜色,这个元素将会非常显眼