【发布时间】：2017-02-01 22:56:38
【问题描述】：
首先看下图
我已经尝试过该中心边框以及所有部分。但是无法了解边界开始，边界结束和每个部分的边界小圆。 查看我在下图中尝试的结果
在此处发布代码示例
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;
}
我的问题是如何在该边框中获得像图像中一样的小圆形。提前致谢
【问题讨论】：
-
这里的任何一个答案都应该有帮助 - stackoverflow.com/questions/32825243/…。他们实现了一个进度条，但您可以轻松删除与进度相关的内容，只保留带点的线条。