CSS3画三角形

xiaoxiao2021-03-25 93

1.向下

transform: translateY(-50%) rotate(45deg); translateY代表Y轴旋转，rotate代表角度。

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div { width: 12px; height: 12px; border-right: #000 solid 2px; border-bottom: #000 solid 2px; transform: translateY(-50%) rotate(45deg); } </style> </head> <body> <div></div> </body> </html>

2.向右

直接更改旋转角度transform: translateY(-50%) rotate(-45deg);

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div { width: 12px; height: 12px; border-right: #000 solid 2px; border-bottom: #000 solid 2px; transform: translateY(-50%) rotate(-45deg); } </style> </head> <body> <div></div> </body> </html>

转载请注明原文地址: https://ju.6miu.com/read-15857.html

技术

最新回复(0)