How to skew element but keep text normal (unskewed)


Tags: css,css3,css-shapes

Problem :

It's possible to reproduce this image using only CSS?

enter image description here

I want to apply this on my menu, so the brown background appears on hover instance

I don't know how to do this.

i have only:

.menu li a:hover{
     display:block;
     background:#1a0000;
     padding:6px 4px;
}


Solution :

skew a parent element (LI) and inverse skew it's children elements

CSS Menu skewed buttons diagonal borders

nav li {
  display:inline-block;
  transition: background 0.2s;
  transform: skew(20deg);  /* SKEW */
}
nav li a {
  display:block;
  text-decoration:none;
  padding:5px 10px;
  font-size:30px;
  transform: skew(-20deg); /* INVERSE SKEW */
}
nav li:hover{
  background:#ddd;
}
<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>


    CSS Howto..

    How to test print output of browsers with online tools?

    CSS / Jquery How to auto-size containers and images

    How to make a diagonal css gradient without the colors blending together(a sharp color change) that's displaced 70% to the right?

    How should i improve my jQuery click funciton?

    How to write CSS to convert div elements into a 3 or 4 column table?

    CSS - How to make a text to be shown under the center of an element, no matter how long the text is

    How to add Button over image using CSS?

    How to fix this cell in the GridView?

    How do I prevent my dropdown from closing when clicking inside it?

    How do you control CSS styles from within the CMS interface in Zotonic?

    CSS: How to create a background cutout using elements (not images)?

    How to not display common border between two adjacent divs?

    How to scale div from jquery css

    CSS styling - how to put these two div boxes adjacent

    show html element before sending ajax sync request

    How to create one UL menu similar to another

    How to adjust Capybara finders on a site using css-modules?

    How can I center the below form?

    How to create an href that opens a div on screen? [closed]

    How to css target “Tab” state of the input?

    How to smooth emboss in css

    How to create offer tag with css and pass value to it

    How to make the page load scrolled down to
    when loaded?

    How to override the width property in css [closed]

    How to use CSS to create a matrix of cells, and not use HTML tags at all

    efficient way to show an beside each instance

    (html/css) How do I remove the margin appearing from my header, and have it only apply to my Logo?

    How to use external css file to style a javafx application

    How to change the color of each instance of a word in an html table with css?

    how to make css animation smoothly for full-screen page?