如何在CSS中创建自定义边框设计 [英] How to create custom border design in css

问题描述

首先请看下图

我尝试了所有部分的中间边框.但是无法了解边界开始，边界结束和每个部分的边界中的小回合. 在下面的图片中查看我尝试过的结果

I have tried that center border along with all sections. But can't get idea about the little rounds in border at start of border,end of border and every sections. See the result that i tried in below image

在此处发布代码示例

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

我的问题是如何在边框中像图像中那样获得小圆形.预先感谢

My question is how to get little round shapes in that border as like in image. Thanks in advance

推荐答案

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

这篇关于如何在CSS中创建自定义边框设计的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！