创建一个带有斜边的 div [重复]答案

【问题标题】：Create a div with angled side [duplicate]创建一个带有斜边的 div [重复]
【发布时间】：2015-09-16 16:46:10
【问题描述】：

假设我有一个容器 div，里面有两个 div。这是我想要得到的效果：

<div>
  <div></div>
  <div></div>
</div>

此外，我需要它是响应式的，宽度和高度以 % 或视口单位表示。而且我需要用各种内容填充它们，有些内容甚至可能部分隐藏在其中一个 div 下。

【问题讨论】：

我将 div 转换为倾斜
w3schools.com/css/css3_2dtransforms.asp
如何避免倾斜影响子元素的情况？有没有比向负方向旋转子元素更实用的方法？
您可以使用SVG 来创建形状。！
你们能提供任何演示吗？

标签： css

【解决方案1】：

不幸的是，CSS 不是那么先进的 re: skew 影响子元素...我确定您正在寻找的是内容将以您在那里创建的角度环绕...我同意唯一的方法是正如@user5151179 指出的那样，使用 2D 转换...只需检查浏览器与此的兼容性（如您所知，对于所有和每个浏览器都没有简单的解决方案来解决此问题）。

我认为最简单的方法是将背景图像添加到外部 div，并有两个矩形 div，您可以在其中添加内容等外部 div，因此您的文本不会以一定角度环绕，如果那样的话有道理。

【讨论】：

【解决方案2】：

试试下面的

<div class='container'>
<div class='div div1'>
</div>
<div class='div div2'>
</div>

<style>
.container{
    height:50px;
    width:100px;
    position:relative;
    overflow: hidden;
}
.div1 {
    background: none repeat scroll 0 0 #0000FF;
    left: -8px;
}
.div2 {
    background: none repeat scroll 0 0 #000000;
    right: -7px;
}
.div{
    width: 57px;
    top: -10px;
    transform: rotate(20deg);
    position: absolute;
    height: 72px;
}

没有 css 方法可以做到这一点。但是我们可以通过一些 css 技巧来做到这一点，就像我上面所做的那样。

【讨论】：