这篇文章主要介绍了使用css实现特殊标志或图形，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
1. 前言
由于图片占的空间比较大，且图片越多，越不好管理，所以有些时候，我们可以使用一些简单的标签样式来实现简单的图形标志来替代图片。
2. 实例展示：
三角形示例
示例代码：
.triangle b { border: 5px solid #fff; border-left: 5px solid #353535; margin: 0; font-size: 0; }
方向箭头示例
示例代码：
.mark b{border:solid #D0D0D0;width:6px;height:6px;display:inline-block;} .mark b.lmark{border-width:2px 2px 0 0;transform: rotate(45deg);}
空缺圆
*{ 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; }
到此这篇关于使用css实现特殊标志或图形的文章就介绍到这了,更多相关css特殊标志内容请搜索本站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持本站！
以上就是使用css实现特殊标志或图形的详细内容，更多请关注本站其它相关文章！
