可以用border做三角形

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        div{
            width: 0px;
            height: 0px;
            border: 30px solid white;
            border-bottom: none;
            border-top-color:blue;

            /*下一条属性没学过，别瞎研究：*/
            transition:all 1s ease 0s;
        }

        /*下一条属性没学过，别瞎研究：*/
        div:hover{
            transform:rotate(180deg);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

注意：单纯写border-top:30px solid white;这一条语句是没有效果的，必须向上面一样写三条

posted @ 2020-01-02 13:48  杨小越  阅读(82)  评论(0)    收藏  举报