纯css制作带三角border篇

    xiaoxiao2021-03-25  26

    介绍如何用 border 来制作三角:

    <div class="arrow-up"></div> <div class="arrow-down"></div> <div class="arrow-left"></div> <div class="arrow-right"></div>

    css 代码如下:

    .arrow-up { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; _border-left: 5px solid white; _border-right: 5px solid white; border-bottom: 5px solid black; overflow:hidden; } .arrow-down { width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; _border-left: 20px solid white; _border-right: 20px solid white; border-top: 20px solid #f00; overflow:hidden; } .arrow-left { width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; _border-top: 10px solid white; _border-bottom: 10px solid white; border-right:10px solid blue; overflow:hidden; } .arrow-right { width: 0; height: 0; border-top: 60px solid transparent; border-bottom: 60px solid transparent; _border-top: 60px solid white; _border-bottom: 60px solid white; border-left: 60px solid green; overflow:hidden; } 结果图片:

    转载请注明原文地址: https://ju.6miu.com/read-150271.html

    最新回复(0)