可拖拽的select组件

前言

不知道大家是否遇到过需要画三角形等多边形的情况，在以前，大概率时候使用的是这样的语法。

.triangle{
    width:0;
    height:0;
    border-left:25px solid transparent;
    border-right:25px solid transparent;
    border-top:60px solid #000;
}

但是现在css3中提供了clip-path属性，可以很方便的实现这种需求

clip-path: polygon(50% 0%, 0% 100%, 100% 100%);

而且CSS 的 clip-path 属性是 clip 属性的升级版，它们的作用都是对元素进行 “剪裁”，不同的是 clip 只能作用于 position 为 absolute 和 fixed 的元素且剪裁区域只能是正方形，而 clip-path 更加强大，可以以任意形状去裁剪元素，且对元素的定位方式没有要求。基于这样的特性，clip-path 常用于实现一些炫酷的动画效果。