用css怎么实现三角形及怎样旋转

我们在制作网页中通常会遇到三角形以及旋转的案列，下面是我的一些方法

1首先是实心三角代码如下,列如给一个span标签
我的携程里边包个i标签，给它设置一个三角形

i{display:inline-block;
  width：0px;
  heigth:0px;
  border:1px solid transparent;
  border-top-color：red;}

微信截图_20190630182337.png

22.png

下面我们来讲这种三角形的制作方法,首先给一个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;