草庐IT

html - 倾斜的 div 顶部和底部 CSS

我正在尝试制作以下倾斜的div。我几乎已经达到了下面的形状,但是底部并没有像我下面的形状那样向正确的方向倾斜。我该如何纠正这个问题?附加形状http://jsfiddle.net//fgdcq3qp/CSS.slanted{background:red;box-sizing:border-box;height:40vh;width:100%;position:relative;padding:20px;}.slanted:before{content:"";background:red;height:40px;transform:skewY(2deg);position:absolut

html - 倾斜的 div 顶部和底部 CSS

我正在尝试制作以下倾斜的div。我几乎已经达到了下面的形状,但是底部并没有像我下面的形状那样向正确的方向倾斜。我该如何纠正这个问题?附加形状http://jsfiddle.net//fgdcq3qp/CSS.slanted{background:red;box-sizing:border-box;height:40vh;width:100%;position:relative;padding:20px;}.slanted:before{content:"";background:red;height:40px;transform:skewY(2deg);position:absolut

html - 响应式对齐倾斜的 Div

使用this的修改版本技术,我已经设法为我正在处理的网站制作倾斜的响应式div。我遇到的问题是有3个倾斜的div在彼此之上,它们旨在在页面下方创建一条对Angular线(因此每个倾斜的div需要与那些倾斜的div正确对齐周围)。到目前为止,对这些div使用百分比宽度还没有奏效,但我不确定还能尝试什么。对此的一个好的解决方案是响应式的并且[最好]仅使用css。*{margin:0;padding:0;}.hero{width:100%;position:relative;border:1pxsolidblack;background-color:green;}.slanted{posit

html - 响应式对齐倾斜的 Div

使用this的修改版本技术,我已经设法为我正在处理的网站制作倾斜的响应式div。我遇到的问题是有3个倾斜的div在彼此之上,它们旨在在页面下方创建一条对Angular线(因此每个倾斜的div需要与那些倾斜的div正确对齐周围)。到目前为止,对这些div使用百分比宽度还没有奏效,但我不确定还能尝试什么。对此的一个好的解决方案是响应式的并且[最好]仅使用css。*{margin:0;padding:0;}.hero{width:100%;position:relative;border:1pxsolidblack;background-color:green;}.slanted{posit

css - 具有倾斜边框的相邻 div?

这个问题在这里已经有了答案:Shapewithaslantedside(responsive)(3个答案)关闭6年前。我想创建两个相互float的div,但是用倾斜的Angular边框将它们分开。我附上了一张照片来证明我的意思。有谁知道这样的事情是否可以用CSS(我猜是用溢出来切断内容:隐藏)这些div需要包含被边框截断的图像,这是一个示例:

css - 具有倾斜边框的相邻 div?

这个问题在这里已经有了答案:Shapewithaslantedside(responsive)(3个答案)关闭6年前。我想创建两个相互float的div,但是用倾斜的Angular边框将它们分开。我附上了一张照片来证明我的意思。有谁知道这样的事情是否可以用CSS(我猜是用溢出来切断内容:隐藏)这些div需要包含被边框截断的图像,这是一个示例: