css上下左右箭頭

本文轉載自查看原文 2019-06-14 14:39 1882 css

代碼：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #app {
            width: 260px;
            height: 200px;
            border: 1px solid #999;
            padding: 20px;
            box-sizing: border-box;
            display: flex;
        }

        .top_arrows {
            width: 20px;
            height: 20px;
            border-top: 1px solid #c3c8d6;
            border-right: 1px solid #c3c8d6;
            transform: rotate(-45deg);
            margin-right:30px;
            margin-top: 6px;
        }

        .bottom_arrows {
            width: 20px;
            height: 20px;
            border-top: 1px solid #c3c8d6;
            border-right: 1px solid #c3c8d6;
            transform: rotate(135deg);
            margin-right:30px;
            margin-top: -6px;
        }

        .left_arrows {
            width: 20px;
            height: 20px;
            border-top: 1px solid #c3c8d6;
            border-right: 1px solid #c3c8d6;
            transform: rotate(-135deg);
            margin-right:10px;
        }

        .right_arrows {
            width: 20px;
            height: 20px;
            border-top: 1px solid #c3c8d6;
            border-right: 1px solid #c3c8d6;
            transform: rotate(45deg);
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="top_arrows"></div>
        <div class="bottom_arrows"></div>
        <div class="left_arrows"></div>
        <div class="right_arrows"></div>
    </div>
    <script>
    </script>
</body>

</html>

效果圖

結束

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 用css制作空心箭頭(上下左右各個方向均有) css三角形上下左右實心空心尖角箭頭 CSS之DIV上下左右居中 js div 隨着鍵盤上下左右箭頭移動上下左右布局（DIV+CSS） CSS實現上下左右垂直居中用CSS讓DIV上下左右居中的方法 CSS 控制元素上下左右居中 css布局之塊上下左右居中 css+div上下左右自適應居中