用css画一个原型里有一个对号或者叉叉的图标
生活随笔
收集整理的這篇文章主要介紹了
用css画一个原型里有一个对号或者叉叉的图标
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
用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>總結
以上是生活随笔為你收集整理的用css画一个原型里有一个对号或者叉叉的图标的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： C# 简单的颜色渐变算法
- 下一篇： JER瘦身方法