首頁  >  文章  >  web前端  >  箭頭用css3怎麼寫

箭頭用css3怎麼寫

藏色散人
藏色散人原創
2021-01-04 10:17:373866瀏覽

用css3寫箭頭的方法:先建立一個前端範例檔;然後利用CSS3中的transform屬性實作一個沒有背景填滿小正方形;最後透過設定它的邊框和翻轉即可實現箭頭效果。

箭頭用css3怎麼寫

本教學操作環境:Dell G3電腦、Windows7系統、HTML5&&CSS3版本。

推薦:《css影片教學

箭頭用css3怎麼寫?

可以利用CSS3中的transform屬性,先實作一個沒有背景填滿小正方形,設定它的邊框、翻轉就可以實現箭頭了。

下面透過範例來看看:

<style>
        .left{
            width: 7px;
            height: 7px;
            border-top: 2px solid #ff0000;
            border-right: 2px solid #ff0000;
            transform: rotate(-135deg);
            
        }
        .right{
            width: 7px;
            height: 7px;
            border-top: 2px solid #ff0000;
            border-right: 2px solid #ff0000;
            transform: rotate(45deg);
        }
        .top{
            width: 7px;
            height: 7px;
            border-top: 2px solid #ff0000;
            border-right: 2px solid #ff0000;
            transform: rotate(-45deg);
        }
        .bottom{
            width: 7px;
            height: 7px;
            border-top: 2px solid #ff0000;
            border-right: 2px solid #ff0000;
            transform: rotate(135deg);
        }
    </style>
</head>
<body>
    <div class="left"></div>
    <hr>
    <div class="right"></div>
    <hr>
    <div class="top"></div>
    <hr>
    <div class="bottom"></div>
</body>

效果圖:

箭頭用css3怎麼寫

#

以上是箭頭用css3怎麼寫的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn