div旁边的CSS虚线？

Question

我想用纯CSS实现此虚线

我的解决方案是使用：after伪元素绘制虚线，还有另一种方法可以实现这一点吗？不使用伪元素？ 我想使用一个简单的类来实现这一点，虚线的宽度可以是静态的。

Answer 1

您可以考虑使用背景色来实现：

.box {
  padding:5px; 
  border-right:100px solid transparent; /* The same as the width of the line */
  background:
    /*the borders*/
    linear-gradient(red,red) top   /100% 2px padding-box,
    linear-gradient(red,red) bottom/100% 2px padding-box,
    linear-gradient(red,red) left  /2px 100% padding-box,
    linear-gradient(red,red) right /2px 100% padding-box,
    /*the dashed line*/
    repeating-linear-gradient(to right,red 0px 3px,transparent 3px 5px) right center/100px 2px border-box;
  background-repeat:no-repeat;
  
  max-width:250px;
  margin:10px;
  display:inline-block;
}

<div class="box">
 Some text here
</div>
<br>
<div class="box">
 Some long long text here with some wrapping
</div>

Answer 2

您可以使用阴影。设置不同的阴影，重叠并在红色和白色之间切换。

.test {
    display: block;
    width: fit-content;
    border: solid 2px red;
    box-shadow: 15px 0px 0px -10px red,
                20px 0px 0px -10px white,
                25px 0px 0px -10px red,
                30px 0px 0px -10px white,
                35px 0px 0px -10px red,
                40px 0px 0px -10px white,
                45px 0px 0px -10px red,
                50px 0px 0px -10px white,
                55px 0px 0px -10px red,
                60px 0px 0px -10px white,
                65px 0px 0px -10px red,
                70px 0px 0px -10px white,
                75px 0px 0px -10px red;
}

<div class="test">
Whatever text
</div>