如何倾斜元素，但保持文本正常（未纠正）

是否有可能只使用CSS重现此图像？

我想将其应用于我的菜单，所以在hover实例上出现棕色背景

我不知道该怎么做，我只有;

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

Answer 1

skew一个父元素（ LI ）并反向倾斜它的子元素

 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: 30px/1 sans-serif; transform: skew(-20deg); /* INVERSE SKEW */ color: #0bf; } nav li.active, nav li:hover{ background:#000; } 

 <nav> <ul> <li><a href="#">Home</a></li> <li class="active"><a href="#">Products</a></li> <li><a href="#">Contact</a></li> </ul> </nav> 

Answer 2

这里是一个用于不同浏览器的小提琴 – 我在几分钟内创build的。

尝试玩的论点，我用:before和:after做这个。

https://jsfiddle.net/DTBAE/

Answer 3

您可以使用transform: skew(X, Y)属性来实现此目的。 创build一个倾斜的外部容器，然后歪斜内部容器的相反数量，以扭曲文本回到直。 以此小提琴为例。

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

从你所说的话，我相信这是你想要的，如果不是，请澄清什么时候该项目应显示的背景。

Answer 4

要支持IE，只需添加-ms-transform: skew(20deg, 0deg); 除了所有其他的transform: skew(20deg, 0deg); 秒。

Answer 5

 .skew { background: green; color: #fff; padding: 50px; transform: skewX(-7deg); font-size: 20px; font-weight: 700; } .skew p { transform: skewX(7deg); } 

 <div class="skew"> <p>This is caption</p> </div> 

Answer 6

[使用指南针和萨斯 ]这个小混合可能会有所帮助：

 =add_skew($skew_deg_x, $skew_deg_y) +skew($skew_deg_x, $skew_deg_y) .content_wrapper +skew(-$skew_deg_x, -$skew_deg_y) 

Haml / html是这样的：

 // haml / html .skew .content_wrapper // your content 

然后只需要包含它需要的值：

 // sass .skew // other .skew styles +add_skew(-10deg, 0deg)