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

这篇文章主要介绍了使用css实现特殊标志或图形,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

1. 前言

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

2. 实例展示:

三角形示例

示例代码:

 

方向箭头示例 

示例代码:

 

空缺圆

 *{ 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特殊标志内容请搜索html中文网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持html中文网!

以上就是使用css实现特殊标志或图形的详细内容,更多请关注0133技术站其它相关文章!

赞(0) 打赏
未经允许不得转载:0133技术站首页 » CSS 教程