如何偏斜元素，但保持文本正常（unskewed）

本文介绍了如何偏斜元素，但保持文本正常（unskewed）的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

只有CSS可以重现这张图片吗？

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

我想在我的菜单上应用这个，所以棕色背景出现在 hover instance

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

我不知道该怎么做。

我只有：

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

推荐答案

偏斜父元素（ LI ）和逆偏斜是子元素

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

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>

这篇关于如何偏斜元素，但保持文本正常（unskewed）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！