如何使div代表虚线？

Question

我有一个由不同div组成的条形图类型。 CSS：

.outer, .inner, .target {
      height: 14px;
      margin-bottom: 5px;
    }

    .outer {
      background-color: #cccccc;
      width: 200px;
      margin: 0 auto;
      position: relative;
      font-size: 10px;
      line-height: 14px;
      font-family: sans-serif;
    }

    .inner {
      background-color: #66a3ff;
      position: absolute;
      z-index: 1;
      width: calc(200 / 100 * 14.77px);
      color: white;
    }

    .target {
      background-color: transparent;
      width: 19px;
      position: absolute;
      border-right: 3px solid black;
      z-index: 2;
      color: black;
      text-align: right;
    }

HTML：

<div class="outer"> 
        <div class="target" style="width: calc(<?php echo $bar_width; ?> / 100 * (<?php echo $target; ?> / <?php echo $base; ?> * 100))"></div>                   
        <div class="inner" style="width: calc(<?php echo $bar_width; ?> / 100 * (<?php echo $avg; ?> / <?php echo $base; ?> * 100))"></div>
    </div>

黑线表示目标线，但我想将其设为虚线，就像在这种情况下：

我该怎么做？

Answer 1

只需使用css属性边框定义点缀背景

.target {
  background-color: transparent;
  width: 19px;
  position: absolute;
  border-right: 3px dotted black; <--- change solid to dotted/dashed
  z-index: 2;
  color: black;
  text-align: right;
}

Answer 2

你可以为它创建一个div并使用下面的代码：

.divclass{border-right:dotted 1px #333;}