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>

最后效果如下：