我正在尝试通过使用伪指令创建类似的东西:
但是不确定我目前采用的方法是否是解决此问题的最佳方法?
.divider{
display: flex;
flex-direction: column;
}
.line1::before{
content: '';
/*position: absolute;*/
display: block;
width: 4em;
height: .2em;
background: red;
transform: rotate(90deg);
}
.circle::before{
content: '';
display: inline-block;
width: 15px;
height: 15px;
-moz-border-radius: 7.5px;
-webkit-border-radius: 7.5px;
border-radius: 7.5px;
background-color: red;
}
<div class="divider">
<div class="line1"></div>
<div class="circle"></div>
<div class="line2"></div>
</div>
您会使用伪元素创建类似的东西吗?如果是这样,如何使它看起来像图像中的那个?
答案 0 :(得分:2)
这很简单,只需将元素放置在垂直和水平中间即可。
.wrapper {
width: 100px;
height: 200px;
background-color: rgba(30, 50, 80, .3);
position: relative;
}
.wrapper div {
border-radius: 50%;
background-color: blue;
position: absolute;
top: 50%;
margin-top: -25px;
left: 50%;
margin-left: -25px;
width: 50px;
height: 50px;
background: center center no-repeat url(https://static.thenounproject.com/png/19279-200.png) blue;
background-size: 30px;
}
.wrapper:before,
.wrapper:after {
content: '';
display: block;
width: 2px;
height: 60px;
background: blue;
position: absolute;
left: 49px;
}
.wrapper:before {
top: 0;
}
.wrapper:after {
bottom: 0;
}
<div class="wrapper"><div></div></div>
答案 1 :(得分:2)
您也可以仅使用一个元素来完成此操作:
.box {
width:40px;
height:40px;
border-top:40px solid transparent; /* The length of the top line */
border-bottom:40px solid transparent; /* The length of the bottom line */
padding:10px 0; /* Control distance between line and circle*/
/* The lines */
border-image:linear-gradient(to right,
transparent calc(50% - 2px),
red calc(50% - 2px) calc(50% + 2px),
transparent calc(50% + 2px)) 1;
/* The circle */
background:radial-gradient(farthest-side,red 95%,transparent 100%) content-box;
}
<div class="box"></div>
您可以在其中轻松添加另一张图片
.box {
width:40px;
height:40px;
border-top:40px solid transparent; /* The length of the top line */
border-bottom:40px solid transparent; /* The length of the bottom line */
padding:10px 0; /* Control distance between line and circle*/
/* The lines */
border-image:linear-gradient(to right,
transparent calc(50% - 2px),
red calc(50% - 2px) calc(50% + 2px),
transparent calc(50% + 2px)) 1;
/* The circle */
background:
url(https://static.thenounproject.com/png/19279-200.png) center/30px no-repeat,
radial-gradient(farthest-side,red 95%,transparent 100%) content-box;
}
<div class="box"></div>