當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

用css画一个原型里有一个对号或者叉叉的图标

發(fā)布時間：2023/12/8 编程问答 31 豆豆

生活随笔收集整理的這篇文章主要介紹了用css画一个原型里有一个对号或者叉叉的图标小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

用css畫一個圓形里有一個對勾或者叉叉的圖標

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>用css畫一個圓形里有一個對勾或者叉叉的圖標</title><style>.checkmark {width: 40px;height: 40px;border-radius: 40px;background: #009933;display: inline-block;position: relative;}.checkmark:before,.checkmark::after {content: "";height: 28px;width: 6px;border-radius: 10px;display: block;background: white;position: absolute;top: 6px;/*40-6=34*/left: 20px;/*make the two rects in the middle of the cycle */transform: rotate(45deg);-ms-transform: rotate(45deg);}.checkmark::before {height: 15px;transform: rotate(-45deg);-ms-transform: rotate(-45deg);position: absolute;top: 18px;/*40-18=12 */left: 8px;}.fork {width: 40px;height: 40px;border-radius: 40px;background: red;display: inline-block;position: relative;}.g-right {display: inline-block;width: 30px;height: 4px;background: #fff;line-height: 0;font-size: 0;vertical-align: middle;-webkit-transform: rotate(45deg);position: absolute;top: 16px;left: 5px;}.g-right:after {content: "/";display: block;width: 30px;height: 4px;background: #fff;-webkit-transform: rotate(-90deg);}</style> </head><body><div class="checkmark"></div>//對號<div class="fork">//叉叉<div class="g-right"></div></div> </body></html>

總結(jié)

以上是生活随笔為你收集整理的用css画一个原型里有一个对号或者叉叉的图标的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。