提要:这个内容有更简单的方法,border-radius:高度的一半 就可以解决,我们这次主要以学习伪元素after,before为主,利用它们去尝试。
不多说直接上图:
对!就这么简单的一个小样式这是最终的一个小样式。
第一步:构架一个大致的框框
一个大致的框框额,这里的before打错了,我后面进行了修改。
第二步:画两个圆
第三步:初步的准备工作OK了,需要的都有了,那么就是调整位置了。
为了好看,我一起进行了整体的大小调整,改变了些大小。
需要注意的是圆的大小要与元素的高度一致,left和right的移动根据自己判断,一般是 - 半径。其次,因为宽度增加了一个圆的直径,所以最终宽度需要减去圆的直径。
最终图整个代码:
.frm{
width:40px;
height:50px;
background-color:red;
margin:auto;
position:relative;
}
.frm-cnt{
color:white;
font-size:25px;
white-space: nowrap;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%)
}
.frm::before{
content:'';
width:50px;
height:50px;
border-radius:50%;
background-color:red;
position:absolute;
left:-25px;
z-index: -1;
}
.frm::after{
content:'';
width:50px;
height:50px;
border-radius:50%;
background-color:red;
position:absolute;
right:-25px;
z-index: -1;
}
网友评论