css3图标
本文介绍了css3图标的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
用css3怎么画一个这样的图标！！谢谢!!!
解决方案
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8" />
<title>Tab Style</title>
<style>
p {width:112px;height:32px;float:left;position:relative;overflow:hidden;}
p:before {content:'';background:#9f9f9f;width:32px;height:32px;transform:rotate(-45deg);position:absolute;left:6px;border-radius:2px;}
p:after {content:'';background:#9f9f9f;width:96px;height:32px;position:absolute;right:0;border-radius:3px;}
p > i {width:8px;height:8px;background:#fff;border-radius:50%;position:absolute;top:50%;margin-top:-4px;left:8px;}
</style>
</head>
<body>
<p><i></i></p>
</body>
</html>
update 2017.02.07
有同学在问圆点透明的问题，如果仔细阅读style就能发现原点是由i标签来呈现的，只要将i标签的背景色改成rgba就可以达到目的。
p > i {width:8px;height:8px;background:rgba(255,255,255,.3);border-radius:50%;position:absolute;top:50%;margin-top:-4px;left:8px;}这篇关于css3图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
