为了账号安全,请及时绑定邮箱和手机立即绑定

如何倾斜元素但保持文本正常(未倾斜)

/ 猿问

如何倾斜元素但保持文本正常(未倾斜)

潇湘沐 2019-11-15 13:09:15

是否可以仅使用CSS复制此图像?

我想将此应用到菜单,所以棕色背景出现在hover实例上


我不知道该怎么做,我只有。


.menu li a:hover{

     display:block;

     background:#1a0000;

     padding:6px 4px;

}


查看完整描述

3 回答

?
慕慕0277861

skew父元素(LI)并反向倾斜为子元素

nav ul {

  padding: 0;

  display: flex;

  list-style: none;

}

nav li {

  transition: background 0.3s;

  transform: skew(20deg); /* SKEW */

}


nav li a {

  display: block; /* block or inline-block is needed */

  text-decoration: none;

  padding: 5px 10px;

  font: 30px/1 sans-serif;

  transform: skew(-20deg); /* UNSKEW */

  color: inherit;

}


nav li.active,

nav li:hover {

  background: #000;

  color: #fff;

}

<nav>

  <ul>

    <li><a href="#">Home</a></li>

    <li class="active"><a href="#">Products</a></li>

    <li><a href="#">Contact</a></li>

  </ul>

</nav>


查看完整回答
反对 回复 2019-11-15
?
繁花不似锦

这是我在几分钟内创建的,可在不同浏览器上使用的小提琴。


尝试与论据打,我用:before和:after来做到这一点。


https://jsfiddle.net/DTBAE/


查看完整回答
反对 回复 2019-11-15
?
catspeake

您可以使用该transform: skew(X, Y)属性来实现此目的。创建一个倾斜的外部容器,然后在一个内部容器上倾斜相反的量,以使文本倾斜回直。例如看这个小提琴。


http://jsfiddle.net/UZ6HL/4/


从您所说的来看,我相信这就是您想要的,否则请澄清该项目何时应显示背景。


查看完整回答
反对 回复 2019-11-15

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信