CODEWITHSUNDEEP
htmlcss
Raj
Raj

Reputation: 1437

Rotate right border using css

I have a menu list. Now for each menu there is a right hand border.I would like to rotate that border 20deg.

Html

<ul class="menu">
<li>Home</li>
<li>About Us</li>
</ul>

CSS

ul.menu li:after { border-right:1px solid #000; transform:rotate(20deg); }
ul.menu li{ display:inline-block; padding:0 1rem;}

But the above code is not working.

Any help is highly appreciated. Thanks in advance.

Upvotes: 0

Views: 2566

Answers (2)

Stickers
Stickers

Reputation: 78686

There is a simpler way to do it, by just using content: "/", it doesn't look all the same as border but you can get similar results by adjusting the font-size and line-height etc. And it works cross mostly all browsers.

ul.menu li {
    display: inline-block;
    padding-right: 1rem;
}
ul.menu li:after {
    content: "/";
    padding-left: 1rem;
}
ul.menu li:last-child {
    padding-right: 0;
}
ul.menu li:last-child:after {
    content: "";
    padding-left: 0;
}
<ul class="menu">
    <li>Home</li>
    <li>About Us</li>
</ul>

Upvotes: 3

Amar Syla
Amar Syla

Reputation: 3653

Instead of border, you'll have to actually add an element after it:

CSS:

ul.menu li:after { content: ""; background: #000; width: 1px; height: 100%; position: absolute; right: 0; top: 0; transform:rotate(20deg); }
ul.menu li{ position: relative; display:inline-block; padding:0 1rem;}

Here is a fiddle:

http://jsfiddle.net/31xa0rLu/

Upvotes: 3

Related Questions