【图形】CSS绘制放大镜
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <base target="_blank" /> <title>三十客 - 【图形】CSS绘制放大镜</title> <style> #magnifying-glass { font-size: 16em; display: inline-block; width: 0.4em; height: 0.4em; border: 0.1em solid red; position: relative; border-radius: 0.35em; margin: 1rem 0 0 1rem; } #magnifying-glass::before { content: ""; display: inline-block; position: absolute; right: -0.25em; bottom: -0.1em; border-width: 0; background: red; width: 0.35em; height: 0.08em; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); } </style> </head> <body> <div id="magnifying-glass"></div> </body> </html>