javascript - 使用 css 创建倾斜边框

标签 javascript jquery html css

<分区>

我想像这样创建一 strip 有倾斜边框的线 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。然后用旋转和定位来安排它,还有一个红色的边框。一旦您开始响应,也很容易“不显示”它……应该可以解决问题。当然,这取决于你需要的浏览器支持

关于javascript - 使用 css 创建倾斜边框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34951815/

上一篇:python - Flask 分页链接格式不正确

下一篇:javascript - 使用 Jquery 启用/禁用多个下拉列表?

相关文章:

javascript - 尝试在 Next.JS 上导入 Bootstrap,但显示 "TypeError: Cannot read property ' jquery' of undefined”

javascript - "Object()"和 "new Object()"在 JavaScript 中有何不同?

php - 使用 UserFrosting 的 OpenCart 错误重定向

jquery - 如何使用 jQuery 将多个 CSS 元素添加到一个 div?

html - CSS : float based on height ( column wise)

javascript - 如何阻止 <a> 标签的 window.on ('beforeUnload' ) 事件?

javascript - React Native <ListItem onPress={...}> - 为什么要执行此函数?

jquery - Intuit IPP 在 IE 中摧毁 jQuery

html - 雅虎邮件和 Gmail 应用程序未在媒体查询中呈现高度属性

javascript - React - 文档标题添加图标