css实现旋转的小箭头

思路：

先给div元素设置相对定位再给div的伪元素设置绝对定位，然后将其调整到相应的位置然后再利用c3里面的旋转知识，制作一个倒立的小箭头最后，当鼠标移到小三角上时，小三角旋转225度

代码如下：

<div></div>

<style>div {position: relative;width: 249px;height: 35px;border: 1px solid #ccc;margin: 0 auto;}div::after {content: '';position: absolute;top: 8px;right: 15px;width: 10px;height: 10px;border-right: 1px solid #ccc;border-bottom: 1px solid #ccc;transform: rotate(45deg);transition: all .3s;}div:hover::after {transform: rotate(225deg);}</style>

最后效果如下：