在div之间添加边界线

Question

如何使用CSS在每个圆圈div之间添加边框线？圆圈和边框线也必须有响应。我试图添加边框线，但它甚至没有显示..线必须位于圆圈中间的中间位置。

＆＃13;

＆＃13;

.default-step {
  height: 120px;
  max-width: 120px;
  text-align: center;
  vertical-align: middle;
  border: 5px solid #3A83C5;
  border-radius: 50%;
  background: #FFF;
  color: #084085;
  font: 16px "josefin sans", arial;
  cursor: default;
  line-height: 3em;
  justify-content: space-between;
  flex: 1 1 auto;
  align-items: stretch;
}

.steps {
  width: 100%;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  align-items: stretch;
}

.steps div:not(:last-child) {
  border-bottom: 4px solid #0369B3;
}

＆＃13;

<div class="steps">

  <div id="circle-step-1" class="default-step">STEP 1</div>

  <div id="circle-step-2" class="default-step">STEP2</div>

  <div id="circle-step-3" class="default-step">STEP 3</div>

  <div id="circle-step-4" class="default-step">STEP 4</div>

  <div id="circle-step-5" class="default-step">STEP 5</div>

</div>

＆＃13;

＆＃13;

＆＃13;

谢谢！

Answer 1

可能是容器上的简单背景：

background:linear-gradient(#084085,#084085) center/100% 5px no-repeat;

＆＃13;

＆＃13;

.default-step {
  height: 100px;
  max-width: 100px;
  text-align: center;
  border: 5px solid #3A83C5;
  border-radius: 50%;
  background: #FFF;
  color: #084085;
  line-height: 3em;
  flex: 1 1 auto;
}

.steps {
  display: flex;
  justify-content: space-between;
  /*Add this code*/
  background:linear-gradient(#084085,#084085) center/100% 5px no-repeat;
}

＆＃13;

<div class="steps">

  <div id="circle-step-1" class="default-step">STEP 1</div>

  <div id="circle-step-2" class="default-step">STEP2</div>

  <div id="circle-step-3" class="default-step">STEP 3</div>

  <div id="circle-step-4" class="default-step">STEP 4</div>

  <div id="circle-step-5" class="default-step">STEP 5</div>

</div>

＆＃13;

＆＃13;

＆＃13;

<强>奖金

如果您想要箭头，可以试试这个：

＆＃13;

＆＃13;

.default-step {
  height: 100px;
  max-width: 100px;
  text-align: center;
  border: 5px solid #3A83C5;
  border-radius: 50%;
  background: #FFF;
  color: #084085;
  line-height: 3em;
  flex: 1 1 auto;
  position:relative;
  box-sizing:border-box;
}
.default-step:not(:first-child):before {
  content:"";
  position:absolute;
  height:20px;
  width:10px;
  top:calc(50% - 10px);
  left:-15px;
  background-image:
   linear-gradient(to bottom right,#084085 50%, white 0),
   linear-gradient(to top right,#084085 50%, white 0);
  background-position:bottom, top;
  background-size:100% 50%;
  background-repeat:no-repeat;
}

.steps {
  display: flex;
  justify-content: space-between;
  /*Add this code*/
  background:linear-gradient(#084085,#084085)0 50%/100% 5px no-repeat;
}

＆＃13;

<div class="steps">

  <div id="circle-step-1" class="default-step">STEP 1</div>

  <div id="circle-step-2" class="default-step">STEP2</div>

  <div id="circle-step-3" class="default-step">STEP 3</div>

  <div id="circle-step-4" class="default-step">STEP 4</div>

  <div id="circle-step-5" class="default-step">STEP 5</div>

</div>

＆＃13;

＆＃13;

＆＃13;

以下是透明度的完整代码：

＆＃13;

＆＃13;

body {
  background:linear-gradient(to right,pink,lightblue);
}
.default-step {
  height: 100px;
  max-width: 100px;
  text-align: center;
  border: 5px solid #3A83C5;
  border-radius: 50%;
  color: #084085;
  line-height: 3em;
  flex: 1 1 auto;
  position:relative;
  box-sizing:border-box;
}
.default-step:not(:first-child):before {
  content:"";
  position:absolute;
  height:20px;
  width:10px;
  top:calc(50% - 10px);
  left:-15px;
  background-image:
   linear-gradient(to bottom right,#084085 50%, transparent 50.5%),
   linear-gradient(to top right,#084085 50%, transparent 50.5%);
  background-position:bottom, top;
  background-size:100% 50%;
  background-repeat:no-repeat;
}

.steps {
  display: flex;
  justify-content: space-between;
  /*Add this code*/
  background:linear-gradient(to right, transparent 100px, #084085 100px, #084085 calc(100% - 5px),transparent 0) 0 50%/calc((100% - 100px)/4) 5px repeat-x;
}

＆＃13;

<div class="steps">

  <div id="circle-step-1" class="default-step">STEP 1</div>

  <div id="circle-step-2" class="default-step">STEP2</div>

  <div id="circle-step-3" class="default-step">STEP 3</div>

  <div id="circle-step-4" class="default-step">STEP 4</div>

  <div id="circle-step-5" class="default-step">STEP 5</div>

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您还可以添加一个额外的div作为分隔符。注意CSS类.divider和圆圈之间添加的div。

.default-step {
  height: 120px;
  max-width: 120px;
  text-align: center;
  vertical-align: middle;
  border: 5px solid #3A83C5;
  border-radius: 50%;
  background: #FFF;
  color: #084085;
  font: 16px "josefin sans", arial;
  cursor: default;
  line-height: 3em;
  justify-content: space-between;
  flex: 1 1 auto;
  align-items: stretch;
}

.steps {
  width: 100%;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  align-items: stretch;
}

.steps div:not(:last-child) {
  border-bottom: 4px solid #0369B3;
}

.divider {
  width: 2px;
  background-color: grey;
}

<div class="steps">
  <div class="steps">
    <div id="circle-step-1" class="default-step">STEP 1</div>
    <div class="divider"></div>
    <div id="circle-step-2" class="default-step">STEP2</div>
    <div class="divider"></div>
    <div id="circle-step-3" class="default-step">STEP 3</div>
    <div id="circle-step-4" class="default-step">STEP 4</div>
    <div id="circle-step-5" class="default-step">STEP 5</div>
  </div>
</div>