html - 在div之间添加边框线

Question

如何使用 CSS 在每个圆 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;
}

<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>

谢谢!

Answer 1

也许容器上有一个简单的背景:

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

.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;
}

<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>

---

奖金

如果你想要箭头，你可以试试这个:

.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;
}

<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>

下面是带有透明度的完整代码:

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;
}

<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>