使用css实现特殊标志或图形

1. 前言

由于图片占的空间比较大，且图片越多，越不好管理，所以有些时候，我们可以使用一些简单的标签样式来实现简单的图形标志来替代图片。

2. 实例展示：

三角形示例

示例代码：

 1 <style type="text/css">
 2 .triangle b {
 3     border: 5px solid #fff;
 4     border-left: 5px solid #353535;
 5     margin: 0;
 6     font-size: 0;
 7 }
 8 </style>
 9 <b></b>
10         

 

方向箭头示例　

示例代码：

1 <style type="text/css">
2 .mark b{border:solid #D0D0D0;width:6px;height:6px;display:inline-block;}
3 .mark  b.lmark{border-width:2px 2px 0 0;transform: rotate(45deg);}
4 </style>
5 <b class="lmark"></b>

 

转载于:https://www.cnblogs.com/xyyt/p/5625898.html