CSS 伪元素+过渡+旋转制作倒三角

<div></div>

div{
    width:250px;
    height:35px;
    border:1px solid #000;
    position:relative;
}
div::after{
	content:"";
    position:absolute;
    top:8px;
    right:15px;
    width:10px;
    height:10px;
    /*制作三角*/
    border-right:1px solid #000;
    border-bottom:1px solid #000;
    transform:rotate(45deg);
    /*过渡*/
    transition:all 0.6s
}
/*hover状态下 div里面的三角旋转*/
div:hover::after{
    // 180deg + 45deg
	transform:rotate(225deg);
}