用css3怎么画一个这样的图标！！谢谢!!!
认证高级PHP讲师
<!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;}
正在学习前端。尝试做一下。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>CSS画标签</title> <link rel="stylesheet" href=""> <style> .content{ width:150px; height:50px; position:relative; left:200px; background-color: #ccc; border-radius:0 5px 5px 0; } .angel{ position: absolute; width:0; height:0; border-top: 25px solid transparent; border-bottom:25px solid transparent; border-right:25px solid #ccc; left:-25px; } .circle{ background-color: #fff; height:10px; width:10px; border-radius: 50%; position:absolute; top:20px; } </style> </head> <body> <p class="content"> <p class="angel"></p> <p class="circle"></p> </p> </body> </html>
如果白色小圆点处需要透明，能看到底层背景。这如何做呢
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
正在学习前端。尝试做一下。
如果白色小圆点处需要透明，能看到底层背景。这如何做呢