84669 Lernen von Personen
152542 Lernen von Personen
20005 Lernen von Personen
5487 Lernen von Personen
7821 Lernen von Personen
359900 Lernen von Personen
3350 Lernen von Personen
180660 Lernen von Personen
48569 Lernen von Personen
18603 Lernen von Personen
40936 Lernen von Personen
1549 Lernen von Personen
1183 Lernen von Personen
32909 Lernen von Personen
用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>
如果白色小圆点处需要透明,能看到底层背景。这如何做呢
正在学习前端。尝试做一下。
如果白色小圆点处需要透明,能看到底层背景。这如何做呢