其他分享
首页 > 其他分享> > 用border和transform变形制作下拉倒三角按钮

用border和transform变形制作下拉倒三角按钮

作者:互联网

<style>
	div{
		width: 200px;
		height: 35px;
		border: 2px solid gray;
		/*父相*/
		position: relative;
	}
	span{
		/*子绝:相对于父元素进行绝对定位*/
		position: absolute;
		top: 3px;
		right:15px;
		/*定个宽高*/
		width: 15px;
		height: 15px;
		/*只要下边和右边*/
		border-bottom:2px solid gray;
		border-right: 2px solid gray;
		/*旋转形成下三角*/
		transform:rotate(45deg);
	}
</style>

	<div><span></span></div>

效果:

标签:gray,right,solid,2px,拉倒,transform,15px,border
来源: https://www.cnblogs.com/chenxi188/p/14037352.html