create slanted border with css

Question

i want create a line with slanted border like this http://www.tiikoni.com/tis/view/?id=0ea293a (red line)

how make this with css-css3 or 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>

Only some tipps: use `:before` and/or `:after` pseudo elements, `border`s and `transform: rotate()`. — Linus Caldwell, Jan 22 '16 at 16:52
@Linus Caldwell , can you show me a example, i don't understand — SURTLER77, Jan 22 '16 at 16:55
@SURTLER77: I see only a slanted border and not a curve. Is that what you meant by curve? If yes have a look at this one -http://stackoverflow.com/questions/29982414/drawing-angled-lines-in-css/29982491#29982491 — Harry, Jan 22 '16 at 16:57
Or even this should help - http://stackoverflow.com/questions/32705653/creating-a-css-double-border-line-with-a-step-in-the-middle/32709102#32709102 and this - http://stackoverflow.com/questions/29917180/creating-a-tab-shape-with-css-or-svg/29922567#29922567 — Harry, Jan 22 '16 at 17:04

score 1 · Answer 1 · answered Jan 22 '16 at 16:55

Simplest way is to use ::after on the logo. Then arrange that with rotate and positioning, along with a red border. Will also be easy to 'display none' it once you get to responsive... Should do the trick. Of course, this is dependent on your needed browser support

create slanted border with css

1 Answers1