问题
如上图所示,如何通过伪元素::before
和::after
实现中间宽度为奇数px的竖线与其伪元素的上下两个直径为偶数px的圆居中对齐呢?
这是我实际开发中遇到的一个问题。当然,两圆的直径也为奇数就没这么多事了。
我的实际需求是: 竖线宽为1px,上圆直径为10px,下圆直径为20px。不是伪元素的话,很多方法可以实现它们居中对齐,但是用伪元素怎么做呢?下面就是我的骚操作了。
思路
一番冥思苦想后,终于想到用transform: scale()
来解决这个问题:
- 首先我们给
div.line
设个border
宽度为1px,这样这个div.line
宽度就是2px。 - 然后我们用伪元素给它添加一个直径为10px的上圆,一个直径为20px的下圆,然后使它们居中对齐。线宽为偶数,圆直径为偶数,很好居中对齐的。
- 接下来就是骚操作了。我们给
div.line
添加一个transform: scaleX(.5)
,这样div.line
与其伪元素的X轴方向都缩小了一半,这样就使得竖线宽为1px。那此时圆两边也缩小了一半,怎么解决呢? - 同样,我们使用
transform: scaleX(2)
把两个伪元素的圆X轴方向给放大回来。
这样就完美实现了我的实际开发中的需求了。
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
.line {
height: 100px;
width: 0;
margin: 50px auto auto;
border: 1px solid red;
background-color: red;
position: relative;
transform: scaleX(.5);
}
.line::before, .line::after {
content: ' ';
position: absolute;
border-radius: 50%;
background-color: red;
transform: scaleX(2);
}
.line::before {
width: 10px;
height: 10px;
left: -5px;
top: -10px;
}
.line::after {
width: 20px;
height: 20px;
left: -10px;
bottom: -20px;
}
</style>
<div class="line"></div>
</body>
</html>