网站首页HTML/CSS
纯CSS实现三角形方向切换

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>纯CSS实现三角形方向切换</title>
    <style type="text/css">
        .arrow{position:relative;display:block;overflow:hidden;margin:30vh auto 0;width:200px;height:100px;}
        .arrow:after{position:relative;top:0;left:0;display:inline-block;width:0;height:0;border:100px solid transparent;content:"";border-top-color:#5f6368;}
        .arrow:hover:after{top:-100px;content:"";border-bottom-color:#5f6368;}
    </style>
</head>
<body>
<i class="arrow"></i>
</body>
</html>