css特殊图形–空缺圆
1.Demo展示:
2 . Html布局:
<div></div>
3. css样式表:
*{
padding:0;
margin:0;
}
div:before{
content:"";
width:20px;
height:20px;
position:absolute;
top:-10px;
left:40px;
border-radius:50%;
background-color:white;
}
div{
position:relative;
width:100px;
height:100px;
margin:100px auto;
box-shadow:0 0 2px red;
background-color:#ccc;
}
4. 变更:
如果要使三角形出现在左边,把以下代码做相应的更改即可:
-
原来的:
top:-10px;
-
更改过后的:
top: 90px;
-
效果如下:
注:
特别注意 : before里面的 content、width、height 以及定位的使用 ;
(其他方向类似)
css伪类实现三角形,尖角,请查看:
link(https://blog.csdn.net/qq_43495629/article/details/87806185).
~如遇错误,欢迎指正;
-
结束语…………………………福利时间到………………………………
大家同为程序员,在这里给大家真诚的送上福利。