image.png
    实现：

    1.     <style>
    2.         div {
    3.             position: relative;
    4.             width: 300px;
    5.             height: 40px;
    6.             margin: 200px auto;
    7.             border: 1px solid #bfbfbf;
    9.         }
    10.       /* 三角形用伪元素做*/
    11.         div::after {
    12.             position: absolute;
    13.             top: 13px;
    14.             right: 10px;
    15.             content: '';
    16.             width: 10px;
    17.             height: 10px;
    18.             border-right: 2px solid #bdbdbd;
    19.             border-bottom: 2px solid #bdbdbd;
    20.             transform: rotate(45deg);
    21.             transition:  0.3s;
    22.         }
    24.         div:hover::after{
    25.             transform: rotate(225deg);
    27.         }
    28.     </style>
    29. </head>
    31. <body>
    32.     <div></div>
    33. </body>