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

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

在这里输入图像说明

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

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

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

skew一个父元素( LI )并反向倾斜它的子元素

CSS菜单歪斜的按钮对角线的边界

 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> 

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

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

https://jsfiddle.net/DTBAE/

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

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

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

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

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

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

 =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)