Top
Fork me on Gitee

css 绘制三角形 && css 向下箭头旋转 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>三角形</title>
    <style>
        div{
            width:0;height:0;
            border: 20px solid;
            /*平分效果*/
            border-color:red green blue black;
            /*单个三角形*/
            /*border-color:transparent transparent lightgreen transparent;*/
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>


　/* 向上的箭头 */
　.dot-top {
　　　position: relative;
　　　top: 21px;
　　　left: 3rem;
　　　font-size: 0;
　　　line-height: 0;
　　　border: 10px dashed #eeeeee;
　　　border-top-width: 0;
　　　border-right-color: transparent;
　　　border-bottom-style: solid;
　　　border-left-color: transparent;
　　}

　

　/* 向下箭头旋转-展开内容 */ 

　　i{
　　　　width: .14rem;
　　　　height: .08rem;
　　　　background: url('../images/down@2x.png') no-repeat center;
　　　　background-size: 100% 100%;
　　　　transition: transform 0.3s ease;
　　　　-moz-transition: -moz-transform 0.3s ease;
　　　　-webkit-transition: -webkit-transform 0.3s ease;
　　　　-o-transition: -o-transform 0.3s ease;
　　}
　　.up {
　　　　transform: rotate(180deg);
　　　　-webkit-transform: rotate(180deg);
　　　　-moz-transform: rotate(180deg);
　　　　-o-transform: rotate(180deg);
　　}

　　

 

posted @ 2018-08-21 23:01  lisashare  阅读(486)  评论(0)  编辑  收藏  举报