css实现一些炫酷的东西

最近更新时间：2017年09月15日16:50:04

    当已经适应了工作状态时，时间是可以自由支配的，因此可以学习一些自己没有用到的技术汇总。

1、css实现一条有两种颜色的线条

#line{
        border-left: 50px solid red;
        border-right: 200px solid #ccc;
        height: 2px;
        width: 0;
}

2、实现对话框有向下直角小三角

    如图：

    html结构：

<div class="tag">
      <div class="rectangle">161 Regions</div>
      <div class="triangle"></div>
</div>

    css结构：

.tag{
      position:relative;
      .rectangle{
        text-align: center;
        line-height:r(50);
        width:r(176);
        height:r(50);
        border:r(1) solid #fff;
        background-color:#101829;
        color:#fff;
        position:relative;
        z-index: 1;
      }
      .triangle{
        width:r(16);
        height:r(16);
        border:r(1) solid #fff;
        border-color: transparent #fff #fff transparent;
        background-color:#101829;
        position:relative;
        top:r(-10);
        transform: rotate(45deg);//顺时针旋转45度
        z-index: 2;
        left:r(20);
      }
}

3、实现实心三角形

    把上、左、右三条边隐藏掉（颜色设为 transparent）
#demo {
  width: 0;
  height: 0;
  border-width: 20px;
  border-style: solid;
  border-color: transparent transparent red transparent;//三角朝上
}

未完，待续...