css3圖標(biāo)
問題描述
用css3怎么畫一個(gè)這樣的圖標(biāo)！！謝謝!!!
問題解答
回答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有同學(xué)在問圓點(diǎn)透明的問題，如果仔細(xì)閱讀style就能發(fā)現(xiàn)原點(diǎn)是由i標(biāo)簽來呈現(xiàn)的，只要將i標(biāo)簽的背景色改成rgba就可以達(dá)到目的。
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：
正在學(xué)習(xí)前端。嘗試做一下。
<!DOCTYPE html><html><head> <meta charset='utf-8'> <meta http-equiv='X-UA-Compatible' content='IE=edge'> <title>CSS畫標(biāo)簽</title> <link rel='stylesheet' href='http://m.propowerdrill.cn/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：
如果白色小圓點(diǎn)處需要透明，能看到底層背景。這如何做呢
相關(guān)文章：
1. vue計(jì)算屬性怎么樣與for結(jié)合使用2. angular.js - vue/react 渲染內(nèi)容抖動3. node.js - 如何使用mongoose連接數(shù)據(jù)庫中已經(jīng)存在的一個(gè)集合。4. html5 - 如何實(shí)現(xiàn)圖中的刻度漸變效果？5. css - div外層有一圈白色6. node.js - version3的generic-pool問題7. javascript - Object.create(null) 和 {} 區(qū)別是什么8. javascript - vue v-for循環(huán)，子循環(huán)內(nèi)要取到父循環(huán)的鍵值，如何做到？9. redis - 不知道國內(nèi)有多少用Python + CouchDB的朋友，談一下經(jīng)驗(yàn)。。。10. PHP能實(shí)現(xiàn)百度網(wǎng)盤的自動化么？
網(wǎng)公網(wǎng)安備