使用 CSS 创建倾斜边框

create slanted border with css

本文关键字：边框 倾斜 创建 CSS 使用      更新时间：2023-09-26

我想像这样创建一条带有倾斜边框的线 http://www.tiikoni.com/tis/view/?id=0ea293a（红线）

如何使用CSS-CSS3或JS做到这一点？

<div id="DIV_1">
    <img src="/uploads/2016/01/logo.jpg" width="250px" id="IMG_2" alt='' />
    <nav id="NAV_3">
        <button id="BUTTON_4">
            Primary Menu
        </button>
        <div id="DIV_5">
            <ul id="UL_6">
                <li id="LI_7">
                    <a href="/lcvb/" id="A_8">Home</a>
                </li>
                <li id="LI_9">
                    <a href="#" id="A_10">about</a>
                </li>
                <li id="LI_11">
                    <a href="#" id="A_12">location</a>
                </li>
                <li id="LI_13">
                    <a href="#" id="A_14">service & quality</a>
                </li>
                <li id="LI_15">
                    <a href="#" id="A_16">Contact</a>
                </li>
            </ul>
        </div>
    </nav>
</div>

最简单的方法是在徽标上使用 ：：after。然后通过旋转和定位以及红色边框进行排列。一旦你得到响应，也很容易"不显示"它......应该做这个伎俩。当然，这取决于您需要的浏览器支持

相关文章：