css3图标
问题描述
用css3怎么画一个这样的图标！！谢谢!!!
问题解答
回答1：<!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;}回答2：
正在学习前端。尝试做一下。
<!DOCTYPE html><html><head> <meta charset='utf-8'> <meta http-equiv='X-UA-Compatible' content='IE=edge'> <title>CSS画标签</title> <link rel='stylesheet' href='https://www.haobala.com/wenda/5948.html'> <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>回答3：
如果白色小圆点处需要透明，能看到底层背景。这如何做呢
相关文章：
1. javascript - 引入 simditor，但是显示标签，这个怎么解决。2. android - 目前有哪些用Vue.js开发移动App的方案？3. 为什么要通过常量的方式拐弯抹角的写呢，直接写DSN之类的不好吗4. python - 关于flask 静态文件配置404的问题5. python - scrapy获取网页指定内容，后翻到下一页继续，固定循环次数。。问题6. defined这个实验代码我这里不对哇7. python - 一个关于爬虫的问题8. linux - 为公司配置服务器，要求在上面装win7的虚拟机，那我还需要装桌面环境吗？9. javascript - 仿着echarts官网的地图做了个例子，但是只显示出来了地点，没有画出飞机动态效果？？急10. android - 安卓实现类似QQ刚换聊天背景的功能
网公网安备