How to create italic box in css?

Question

How to create italic box in css like this

my code is

.ml {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.ml li {
  display: inline-block;
  border: solid 1px #000;
  font-style: italic;
  padding: 5px 10px;
}

.ml li.active,
.ml li:hover {
  background: #000;
  color: #ffffff
}

<ul class="ml">
  <li class="active">day</li>
  <li>week</li>
  <li>month</li>
  <li>year</li>
</ul>

Answer 1

Just need to add skew property to your CSS

.ml {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.ml li {
    display: inline-block;
    border: solid 1px #000;
    font-style: italic;
    padding: 5px 10px;
    transform: skewX(-20deg);
}

.ml li.active,
.ml li:hover {
    background: #000;
    color: #ffffff
}

<ul class="ml">
    <li class="active">day</li>
    <li>week</li>
    <li>month</li>
    <li>year</li>
</ul>

Answer 2

The problem with some of the answers I've seen thus far is that the text becomes over-skewed. The <li>s are already italic, but adding skew to the elements makes the effect over-pronounced.

We want the boxes skewed, but the text left alone.

To do this, I add a span to each li and unskew the text in the inverse direction.

/* Keep things organized and store skew value in CSS variable */
:root {
  --skew-value: -20deg;
}

.ml {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.ml li {
  display: inline-block;
  border: solid 1px #000;
  font-style: italic;
  padding: 5px 10px;
 
  /* Skew the box */
  transform: skew(var(--skew-value));
}

.ml li > span {
  /* Unskew the text */
  transform: skew(calc(var(--skew-value) * -1));
  display: inline-block;
}

.ml li.active,
.ml li:hover {
  background: #000;
  color: #ffffff
}

<ul class="ml">
  <li class="active"><span>day</span></li>
  <li><span>week</span></li>
  <li><span>month</span></li>
  <li><span>year</span></li>
</ul>

http://jsfiddle.net/xftywz1h/