create slanted border with css [duplicate]

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, borders and transform: rotate(). — Linus Caldwell
– Linus Caldwell, Commented Jan 22, 2016 at 16:52
@Linus Caldwell , can you show me a example, i don't understand — SURTLER77
– SURTLER77, Commented Jan 22, 2016 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 -stackoverflow.com/questions/29982414/… — Harry
– Harry, Commented Jan 22, 2016 at 16:57
Or even this should help - stackoverflow.com/questions/32705653/… and this - stackoverflow.com/questions/29917180/… — Harry
– Harry, Commented Jan 22, 2016 at 17:04

Action_Turtle · Accepted Answer · 2016-01-22 16:55:39Z

1

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

answered Jan 22, 2016 at 16:55

Action_Turtle

19013 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

create slanted border with css [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related