CSS实现宽为奇数的线与其伪元素直径为偶数的圆居中对齐

最新推荐文章于 2022-01-03 18:27:31 发布

码飞飞

最新推荐文章于 2022-01-03 18:27:31 发布

阅读量359

点赞数

分类专栏： CSS 文章标签： css 伪元素

本文链接：https://blog.csdn.net/weixin_43820866/article/details/112461937

版权

CSS 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

问题

在这里插入图片描述
如上图所示，如何通过伪元素::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>

码飞飞

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
CSS实现宽为奇数的线与其伪元素直径为偶数的圆居中对齐

问题如上图所示，如何通过伪元素::before和::after实现中间宽度为奇数px的竖线与其伪元素的上下两个直径为偶数px的圆居中对齐呢？这是我实际开发中遇到的一个问题。当然，两圆的直径也为奇数就没这么多事了。我的实际需求是：竖线宽为1px，上圆直径为10px，下圆直径为20px。不是伪元素的话，很多方法可以实现它们居中对齐，但是用伪元素怎么做呢？下面就是我的骚操作了。思路一番冥思苦想，终于想到用transform: scale()来解决这个问题：首先我们给div.line设个borde
复制链接

扫一扫

专栏目录