css - 如何在css中创建斜体框？

Question

如何像这样在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;
}

.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

只需要在你的 css 中添加 skew 属性

.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>