单边框
方法一:border + border-image + linear-gradient
.border {
width: 200px;
height: 200px;
background-color: red;
margin: 0 auto;
border-bottom: 1px solid transparent;
border-image: linear-gradient(to bottom, transparent 50%, Green 50%) 0 0 100% 0;
}
方法二:伪元素 + background-image
.border {
position: relative;
width: 200px;
height: 200px;
background-color: red;
margin: 0 auto;
}
.border::before {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background-image: linear-gradient(to bottom transparent 50%, blue 50%);
}
方法三:定位 + 伪元素 + transfrom 缩放(scale)
.border {
position: relative;
width: 200px;
height: 200px;
background-color: red;
margin: 0 auto;
}
.border::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background: blue;
transform: scaleY(0.5);
}
多边框
方法一:定位 + 伪元素 + transfrom 缩放(scale)
.border {
position: relative;
width: 200px;
height: 200px;
background-color: red;
margin: 0 auto;
}
.border::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 200%;
height: 200%;
border: 1px solid blue;
transform: scale(0.5);
transform-origin: 0 0;
}