CSS3中用代码书写三角

CSS3中用代码书写三角
首先，给一个div盒子作为研究对象，给div定义属性，代码如下：

div {
            width: 249px;
            height: 35px;
            border: 1px solid #000;
            position: relative;
     }

----------------------------（分割线）-----------------------------
然后，我们给一个伪元素选择器作为三角元素，代码如下：

div::after {
            content: "";
            position: absolute;
            top: 9px;
            right: 8px;
            width: 10px;
            height: 10px;
            border-right: 1px solid #000;
            border-bottom: 1px solid #000;
            transform: rotate(45deg);
            transition: all 0.6s;
        }

备注：
conten配合::after使用，作用是为了显示伪类元素的内容。

----------------------------（分割线）-----------------------------

		top: 9px;
        right: 8px;
        width: 10px;
        height: 10px;

这些代码是用来调整三角位置的，具体数值需要根据浏览器的显示情况来调整（调整方法为：打开浏览器页面以后按F12，然后点击箭头，然后点击页面的三角图标，会弹出参数调整的窗口，调整到合适的数据以后，进入代码页面，将代码中的参数改过来）。
----------------------------（分割线）-----------------------------

		    border-right: 1px solid #000;
            border-bottom: 1px solid #000;
            transform: rotate(45deg);

这些代码是用来把三角从正方形盒子里截取出来， border-right: 1px solid #000;的意思是取正方形盒子的右边框，
border-bottom: 1px solid #000;的意思是取正方形盒子的下边框，
transform: rotate(45deg);的意思是截取的部分顺时针旋转45度
----------------------------（分割线）-----------------------------

transition: all 0.6s;

这句代码的意思是图标旋转总共用时0.6s
----------------------------（分割线）-----------------------------
为了达到“鼠标经过div，里面地三角旋转”的效果，代码如下：

div:hover::after {
            transform: rotate(225deg);
        }

这里的代码的意思是：当鼠标经过的时候，三角图标顺时针旋转225度（这里旋转角度为225是因为图标本身已经旋转了45度了，在此基础上旋转180度，最终结果是45+108=225度）。

总结：通过这种方法，我们可以让某些图标进行全代码实现，避免了素材不足带来的问题。