如何使 html div 块看起来像剪切？内部示例[关闭]

Posted 2023-03-05

【中文标题】如何使 html div 块看起来像剪切？内部示例[关闭]

【英文标题】：How to make html div block look like cut? Example inside [closed]

【发布时间】：2015-02-13 17:16:27

【问题描述】：

我必须用这样的块制作一个页面：

如何转换这些 div 块？块中的文本或其他内容应该是正常的，而不是像背景一样转换。

【问题讨论】：

用 CSS 或许你可以.....你试过什么？

我试过像link 那样，但背景之后的边框会覆盖在下一个背景上。

也许试试看这里:-) generatedcontent.org/post/26407228072/split-feature

【参考方案1】：

您可以使用 CSS3 转换，为了防止内容出现转换，您可以将它们转换为与其父对象相反的方向。

例如：

.outer
    transform: skew(0deg, -5deg) ;

.inner
    transform: skew(0deg, 5deg) ;

这里有一个Working Example 演示了这一点。

HTH, -泰德

【参考方案2】：

您可以使用伪元素，绝对定位它然后使用transform 属性到rotate DIV。我已经用一个例子更新了你在 cmets 中链接的 jsFiddle：http://jsfiddle.net/2bZAW/3449/

div:after 
    content: '';
    position: absolute;
    bottom: 15px;
    left: -25px;
    height: 100px;
    width: 110%;
    background-color: yellow;
    transform: rotate(-5deg);