How to skew a ul li but not the in ul li a?

Question

I have a ul li a menu and want to skew the ul li but not the a. The ul li skews, but the a won't skew to normal position.

header ul li {
    display: inline-block;
    background: #f5c207;
    padding: 10px 20px;
    margin-left: 10px;
    transform: skew(-20deg);
}
header ul li a {
    transform: skew(20deg);
}

<div id="top" class="container">
    <ul>
        <li><a href="">About us</a></li>
        <li><a href="">Other</a></li>
        <li><a href="">Contact</a></li>
    </ul>
</div>

Not for me (also Mac and Google Chrome). OP.. maybe use `:after` for the background. — putvande, Oct 13 '17 at 18:07
@Blazemonger please don't change the code; that could be exactly what his problem is — TylerH, Oct 13 '17 at 18:07
He said it skews, but won't skew back. That wouldn't happen if the CSS wasn't being applied at all. — Blazemonger, Oct 13 '17 at 18:07
@MehdiYaghoubi You need to start with using `
` elements in your HTML, or use `div` in your selector, and see if that fixes your problem. Your HTML and CSS need to match, in other words. — TylerH, Oct 13 '17 at 18:08
@Blazemonger I know, but it's OP's responsibility to provide the code he has; it's not your responsibility to guess. — TylerH, Oct 13 '17 at 18:08
@TylerH Tell you what: you wait for an answer from OP, and in the meantime, I'll just be helpful. — Blazemonger, Oct 13 '17 at 18:10

score 5 · Accepted Answer · answered Oct 13 '17 at 18:08

5

You can't skew inline elements, try this:

header ul li {
    display: inline-block;
    background: #f5c207;
    padding: 10px 20px;
    margin-left: 10px;
    transform: skew(-20deg);
}
header ul li a {
    display:inline-block;
    transform: skew(20deg);
}

<header id="top" class="container">
    <ul>
        <li><a href="">About us</a></li>
        <li><a href="">Other</a></li>
        <li><a href="">Contact</a></li>
    </ul>
</header>

answered Oct 13 '17 at 18:08

Dale

1,911
11
18

There is another way to doing this. We can use pseudo class rather changing to the element. We can use this code. header ul li { display: inline-block; padding: 10px 20px; margin-left: 10px; position: relative; } header ul li:before { background: #000; width: 100%; height: 100%; position: absolute; top: 0; left: 0; content: ""; z-index: -1; } header ul li a { display:inline-block; color:#fff; } – Harden Rahul Oct 14 '17 at 09:31

score 4 · Answer 2 · answered Oct 13 '17 at 18:08

You need to add display: block (or inline-block) to the a inside the list items.

header ul li {
  display: inline-block;
  background: #f5c207;
  padding: 10px 20px;
  margin-left: 10px;
  transform: skew(-20deg);
}

header ul li a {
  display: block;
  transform: skew(20deg);
}

<header id="top" class="container">
  <ul>
    <li><a href="">About us</a></li>
    <li><a href="">Other</a></li>
    <li><a href="">Contact</a></li>
  </ul>
</header>

score 1 · Answer 3 · answered Oct 13 '17 at 18:12

You're trying to skew an inline element. Transforms can only be applied to transformable elements, most commonly block-level elements. From the spec:

A transformable element is an element in one of these categories: an element whose layout is governed by the CSS box model which is either a block-level or atomic inline-level element, or whose display property computes to table-row, table-row-group, table-header-group, table-footer-group, table-cell, or table-caption an element in the SVG namespace and not governed by the CSS box model which has the attributes transform, ‘patternTransform‘ or gradientTransform.

To fix this set a to display: inline-block; or simply display: block;

How to skew a ul li but not the in ul li a?

3 Answers3