css向上箭头代码
有时候我们需这样的向上箭头,用图片或字体图标都不方便,其实用css就可以
demo1 一个倒3角
<html> <head> <meta charset="UTF-8"> <title>Document</title> <style> .jt{ width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 10px solid #ccc; position: absolute; top: 20px; left: 20px; } </style> </head> <body> <i><i></i></i> </body> </html>
demo2 向上箭头
<html> <head> <meta charset="UTF-8"> <title>Document</title> <style> .jt{ width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 10px solid #ccc; position: absolute; top: 20px; left: 20px; } .jt i{ width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 10px solid #fff; position: absolute; top: 2px; left:-8px; } </style> </head> <body> <i><i></i></i> </body> </html>