我们在制作网页中通常会遇到三角形以及旋转的案列,下面是我的一些方法
1首先是实心三角代码如下,列如给一个span标签
我的携程里边包个i标签,给它设置一个三角形
i{display:inline-block;
width:0px;
heigth:0px;
border:1px solid transparent;
border-top-color:red;}
下面我们来讲这种三角形的制作方法,首先给一个span标签写个北京里边包个i标签
span i {
display: inline-block;
width: 5px;
height: 5px;
border-right: 2px solid black;
border-bottom: 2px solid black;}
如果想要旋转的话只需要加个transform:rotate(45deg),(45deg)是旋转角度
span i {
display: inline-block;
width: 5px;
height: 5px;
transform: rotate(45deg);
border-right: 2px solid black;
border-bottom: 2px solid black;
还可以加个旋转时间
transition:1s;