Blogger Information
Blog 175
fans 1
comment 0
visits 384905
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
css制作三角形按钮
dxp2tq的博客
Original
1676 people have browsed it

<!DOCTYPE html>  

<html lang="en">  

<head>  

    <meta charset="UTF-8">  

    <title>制作三角形箭头</title>  

    <style>  

    .arrow{   

        width:0;   

        height:0;   

        border-top:50px solid #000;     /*设置并显示上边框*/   

        border-bottom:none;             /*不设置下边框*/   

        border-left:50px solid transparent;     /*设置但隐藏左边框*/   

        border-right:50px solid transparent;    /*设置但隐藏右边框*/   

    }   

    .arrow:hover{   

        border-top:none;                  /*鼠标经过时,不设置上边框*/   

        border-bottom:50px solid #000;    /*鼠标经过时,设置并显示下边框*/   

    }   

    </style>  

</head>  

<body>  

    <div class="arrow"></div>  

</body>  

</html>

.btn{   

        width:100px;   

        height:100px;   

        background:#ccc;   

        border-radius:50%;   

        box-shadow:5px 5px 10px #000;   /*设置外阴影*/   

    }   

    .btn:active{   

        background:#bbb;   

        box-shadow:5px 5px 10px #000 inset;    /*设置内阴影*/   

    }   

    .btn div{   

        font-size:30px;   

        font-family:"微软雅黑";   

        color:blue;   

        float:left;   

        margin-top:28px;   

        margin-left:20px;   

    }   


Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post