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