猿问

css3图标

用css3怎么画一个这样的图标！！谢谢!!!


扬帆大鱼
浏览 706回答 2
2回答

阿波罗的战车

<!DOCTYPE html><html><head>&nbsp; &nbsp; <meta charset="utf-8">&nbsp; &nbsp; <meta http-equiv="X-UA-Compatible" content="IE=edge">&nbsp; &nbsp; <title>CSS画标签</title>&nbsp; &nbsp; <link rel="stylesheet" href="">&nbsp; &nbsp; <style>&nbsp; &nbsp; &nbsp; &nbsp; .content{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width:150px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height:50px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position:relative;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; left:200px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color: #ccc;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-radius:0 5px 5px 0;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .angel{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position: absolute;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width:0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height:0;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-top: 25px solid transparent;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-bottom:25px solid transparent;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-right:25px solid #ccc;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; left:-25px;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; .circle{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color: #fff;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height:10px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width:10px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border-radius: 50%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; position:absolute;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; top:20px;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; </style></head><body>&nbsp; &nbsp; <div class="content">&nbsp; &nbsp; &nbsp; &nbsp; <div class="angel"></div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="circle"></div>&nbsp; &nbsp; </div></body></html>
0

MYYA

<!DOCTYPE html><html><head>&nbsp; &nbsp; <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />&nbsp; &nbsp; <meta charset="utf-8" />&nbsp; &nbsp; <title>Tab Style</title>&nbsp; &nbsp; <style>&nbsp; &nbsp; &nbsp; &nbsp; p {width:112px;height:32px;float:left;position:relative;overflow:hidden;}&nbsp; &nbsp; &nbsp; &nbsp; p:before {content:'';background:#9f9f9f;width:32px;height:32px;transform:rotate(-45deg);position:absolute;left:6px;border-radius:2px;}&nbsp; &nbsp; &nbsp; &nbsp; p:after {content:'';background:#9f9f9f;width:96px;height:32px;position:absolute;right:0;border-radius:3px;}&nbsp; &nbsp; &nbsp; &nbsp; p > i {width:8px;height:8px;background:#fff;border-radius:50%;position:absolute;top:50%;margin-top:-4px;left:8px;}&nbsp; &nbsp; </style></head><body>&nbsp; &nbsp; <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;}
0
随时随地看视频慕课网APP

相关分类

CSS3
我要回答