css - 如何在 css 中创建自定义边框设计

Question

首先看下图

我已经尝试过中心边框和所有部分。但是无法了解边界开始处，边界结束处和每个部分的边界中的小圆圈。看看我在下图中尝试的结果

在这里发布代码示例

HTML:

 <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 work_container">
 <div class="work_content">
  <div class="work_content_img">
   <img src="https://s-media-cache-ak0.pinimg.com/736x/c7/2f/9a/c72f9a9fb1bfca41d0eabdc07f2f1815.jpg">   
    </div>
   <div class="work_content_txt">
    <div class="work_content_txt_two">
       <h1>step 3</h1>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
       <p>Duis eleifend elit quam. Maecenas at metus leo.</p>
       <p class="itlc_text_two">Quisque lacinia eleifend aliquam. Praesent rhoncus, incidunt auctor.</p>
        </div>
        </div>
        </div>
       </div>

CSS

img{
   max-width:100%;
   }
.work_content {
  width: 100%;
  float: left;
}
.work_container:before{
        content: '';
        border-right: 2px solid #e6e6e6;
        height: 90%;
        position: absolute;
        top: 5%;
        left: 50%;
        z-index:9999;
 }
.work_content .work_content_img {
  float: left;
  width:50%;

 }
 .work_content .work_content_txt {
   float: right;
   width: 42%; 
   padding: 25px;
   background: #fff;
   display: table-cell;
 }
  .work_content .work_content_txt .work_content_txt_two h1 {
    color: #F16A70;
    font-family: oswald;
    text-transform: uppercase;
    font-size: 22px;
 }
 .work_content .work_content_txt .work_content_txt_two p {
   font-family: georgia;
   color: #707070;
   font-size: 18px;
   margin-bottom: 0;
 }
 .work_content .work_content_txt .work_content_txt_two .itlc_text_two {
    font-style: italic;
    font-family: sans serif;
    color: #707070;
   font-size: 19px;
   margin-top: 0;
 }
    .itlc_text_two {
   font-style: italic;
   font-family: sans-serif;
   color: 707070;
   font-size: 18px;
   margin-top: 0;
 }

我的问题是如何在该边框中获得像图像中那样的小圆形。提前致谢

Answer 1

这是一个使用:before 和:after 伪元素的解决方案

img{
   max-width:100%;
   }
.work_content {
  width: 100%;
  float: left;
  position: relative;
}
.vert {
 position: absolute;
  width: 2px;
  height: 90%;
  background: #aaa;
  left: 50%;
  top: 5%;
}
.vert:before {
  content: " ";
  width: 11px;
  height: 11px;
  border-radius: 50%;
  display: block;
  border: 2px solid #aaa;
  position: relative;
  left: -5px;
  top: -11px;
}
.vert:after {
  content: " ";
  width: 11px;
  height: 11px;
  border-radius: 50%;
  display: block;
  border: 2px solid #aaa;
  position: relative;
  left: -5px;
  top: calc(100% - 11px);
}

.work_content .work_content_img {
  float: left;
  width:50%;

 }
 .work_content .work_content_txt {
   float: right;
   width: 42%; 
   padding: 25px;
   background: #fff;
   display: table-cell;
 }
  .work_content .work_content_txt .work_content_txt_two h1 {
    color: #F16A70;
    font-family: oswald;
    text-transform: uppercase;
    font-size: 22px;
 }
 .work_content .work_content_txt .work_content_txt_two p {
   font-family: georgia;
   color: #707070;
   font-size: 18px;
   margin-bottom: 0;
 }
 .work_content .work_content_txt .work_content_txt_two .itlc_text_two {
    font-style: italic;
    font-family: sans serif;
    color: #707070;
   font-size: 19px;
   margin-top: 0;
 }
    .itlc_text_two {
   font-style: italic;
   font-family: sans-serif;
   color: 707070;
   font-size: 18px;
   margin-top: 0;
 }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-xs-12 work_container">
 <div class="work_content">
  <div class="vert"></div>
  <div class="work_content_img">
   <img src="https://s-media-cache-ak0.pinimg.com/736x/c7/2f/9a/c72f9a9fb1bfca41d0eabdc07f2f1815.jpg">   
    </div>
   <div class="work_content_txt">
    <div class="work_content_txt_two">
       <h1>step 3</h1>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
       <p>Duis eleifend elit quam. Maecenas at metus leo.</p>
       <p class="itlc_text_two">Quisque lacinia eleifend aliquam. Praesent rhoncus, incidunt auctor.</p>
        </div>
        </div>
        </div>
       </div>
</div>
</div>