目的:实现六边形边框
效果图:
实现思路:
1. 边形图形拆分
三角形 + 长方形 + 倒三角
2. 实现思路
通过css的伪元素before
构建六边形上半部分,伪元素after
构建六边形下半部分,中间为正常区域,去掉上下边距。
- 中间区域
.step {
position: relative;
width: 44px;
height: 26px;
color: #0137A6;
background-color: #e5ebf6;
border-left: 5px solid var(--custom-color);
border-right: 5px solid var(--custom-color);
font-size: 24px;
font-weight: bold;
text-align: center;
line-height: 26px;
}
- 上半三角形
.step:before {
content: '';
position: absolute;
width: 21px;
height: 21px;
transform: scaleX(1.5) translate(30%, -30px) rotate(45deg);
border-left: 5px solid var(--custom-color);
border-top: 5px solid var(--custom-color);
background-image: linear-gradient(135deg,
var(--color-gradient) 41%,
rgba(255, 255, 255, 0) 0%);
bottom: -17px;
left: -2.5px;
overflow: hidden;
}
- 下半三角形
.step:after {
content: '';
position: absolute;
width: 21px;
height: 21px;
transform: scaleX(1.5) translate(30%, -30px) rotate(45deg);
border-bottom: 5px solid var(--custom-color);
border-right: 5px solid var(--custom-color);
background-image: linear-gradient(315deg,
var(--color-gradient) 42%,
rgba(255, 255, 255, 0) 0%);
top: 44px;
left: -2.5px;
overflow: hidden;
}
3. 其他功能
三种样式的边框,代表三种状态。