我想创建一个单侧偏斜,但是没有这样做。 到目前为止,这是我尝试过的:

  .bg-style1 { background: #ccc; position: relative; display: block; z-index: 2; } .bg-style1:after { content: " "; position: absolute; display: block; width: 30%; height: 100%; top: 0; left: 0; z-index: -1; background: #333333; -ms-transform: skew(-30deg, 0deg); -webkit-transform: skew(-30deg, 0deg); transform: skew(-30deg, 0deg); } 
 <section class="page"> <div class="bg-style1"> .....content goes here </div> </section> 

但它不起作用。 看: 在此处输入图片说明

我要完成的工作: 在此处输入图片说明

===============>>#1 票数:1 已采纳

overflow:hidden.bg-style1规则中,并将transformX(-40%)transform:.bg-style1:after

 .bg-style1 { padding-top: ; background: #ccc; position: relative; display: block; z-index: 2; overflow: hidden; } .bg-style1:after { content: " "; position: absolute; display: block; width: 30%; height: 100%; left: 0; top: 0; z-index: -1; background: #333333; -ms-transform: skew(-30deg, 0deg); -webkit-transform: skew(-30deg, 0deg); transform: skew(-30deg, 0deg) translateX(-50%); } 
 <section class="page"> <div class="bg-style1"> <h1>What is lorem ipsum</h1> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div> </section> 

===============>>#2 票数:0

是您的问题是因为父母背景出现在倾斜块的左侧。 如果是,则应使用transform-origin: 0 0;

  .bg-style1 { background: #ccc; position: relative; display: block; z-index: 2; } .bg-style1:after { content: " "; position: absolute; display: block; width: 30%; height: 100%; top: 0; left: 0; z-index: -1; background: #333333; -ms-transform: skew(-30deg, 0deg); -webkit-transform: skew(-30deg, 0deg); transform: skew(-30deg, 0deg); transform-origin: 0 0; } 
 <section class="page"> <div class="bg-style1"> .....content goes here </div> </section> 

  ask by Aohor Arsalan translate from so

未解决问题?本站智能推荐:

2回复

一侧偏斜div

由于仅在一侧拧div,我有一个问题。 第一个问题是放在此div中的文本也被拧紧了,但是我希望不要这样做。 其次是div不能彼此正确匹配。 第三是由于隐藏的溢出而导致的溢出,我只用它来增加一侧偏斜度,而不能在div的每个角上设定适当的边界半径。 在某个地方下方,我
1回复

半偏斜按钮CSS

我想在CSS中制作这种按钮。 你能帮我做到这一点吗? 偏斜变换还不够... 谢谢
2回复

仅偏向元素的一侧

我想要得到这个图像的结果: 我试过了: #parallelogram-container { margin: 0 50px; } .parallelogram { background: #008dd0; width: 200px; border: none; displ
1回复

尝试仅操作div的一侧

我正在尝试使用CSS操作div,以避免使用图片模仿下面的图片。 到目前为止,我已经偏斜了,但是有什么办法可以抓住拐角并将其定位在水平线以下? 该形状似乎是一个正方形,其左下角有一点点歪斜。 我似乎无法弄清楚如何在不歪曲顶部角的情况下将其拉到一个角。 倾斜的div shsape
8回复

CSS变换偏斜[重复]

这个问题在这里已有答案: 响应式CSS Trapezoid Shape 2答案 有谁知道如何实现这样的倾斜: 使用CSS的新转换属性? 你可以看到我试图扭转两个角落,任何人都知道这是否可能?
2回复

如何倾斜div的一侧然后复制并倾斜另一侧?

假设我有一个div: 我希望它成为两种模式- 倾斜到每一侧- 这是基本形式-http://jsfiddle.net/urielz/neybabgj/ 我怎样才能得到以上两种形式? 更新: 如果需要使用JavaScript,请执行此操作。
1回复

计算偏斜的div的左css值

我有一个wiper div,我想用它对角地擦拭父div。 抽头div具有以下类别: 我希望刮水器在屏幕外从右侧开始,并在屏幕外从左侧结束。 当刮水器处于一半位置时,屏幕必须完全被刮水器充满。 问题是,我不知道雨刮器的父母有多大。 因此,我需要计算以下内容: 宽度:刮水器
1回复

Safari中的CSS偏斜过渡错误(台式机和移动版)

为skewY()属性设置动画时,该问题很明显。 看起来元素的宽度缩小了一点,不再碰到同样宽的容器的侧面。 使用skewX()设置动画时,不会发生相同的情况-高度将按预期进行动画处理。 我在台式机和移动浏览器中都只遇到Safari中的错误。 Firefox和Chrome可以正常工作
1回复

Glitchy CSS3偏斜动画(仅Chrome)

检查以下代码笔: http ://codepen.io/anon/pen/KkgeL/。 给它设置动画时怎么会这么小故障? 我使用的是Chrome v.33。 在 Safari和 Firefox中都可以正常工作(Safari与Chrome出现故障的方式相同,但宽度不是
1回复

在css中偏斜一段,但保持每一行左对齐

我试图扭曲一些位于div内的文本,这很好直接,但我试图找到一种方法来保持每条线完全左对齐div的一侧,因为目前前几行坐在这么多像素,最后几行溢出。 我们使用的字体已经是斜体,但是我们想用偏斜来推动它,我知道它不会看起来很完美,但它适用于我们想要的东西。 有没有办法做到这一点? 我已经尝