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

Boopathi Vkl

首先看下图

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

在此处发布代码示例

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

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

班扎伊

这是使用: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>