<!DOCTYPE html> <html lang=”en”>
<head> <meta charset=”UTF-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> <title>Document</title> <style> div { position: relative; width: 249px; height: 35px; border: 1px solid #000; } div::after { content: “”; position: absolute; top: 8px; right: 15px; width: 10px; height: 10px; border-right: 1px solid red; border-bottom: 1px solid red; transform: rotate(45deg); /* 过渡效果 */ transition: all 0.2s; } /* 鼠标经过div 里面的三角形旋转 */ div:hover::after { transform: rotate(225deg); } </style> </head>
<body> <div></div> </body>
</html>