<div> 有倾斜的边缘和盒子阴影

Question

如何在 HTML 和 CSS 中创建以下模型？

我尝试添加一个单独的 <div> 以使用 transform: rotate(); 创建斜边，但没有成功。

主要想实现的是：

两个 <div> 个内容为
两个 <div> 元素有倾斜的边缘和阴影

Answer 1

skew 变换可以创建坡度，但不幸的是它适用于整个 div，而不仅仅是它的一个边缘。您可以使用重叠或嵌套 divs 在同一个盒子上混合直边和斜边 - 然而，这会使阴影有点问题（参见 http://jsfiddle.net/z9am39sp/）。

另一个弱点是，使用这种特殊设置，您无法使文本适应倾斜的形状。

不过，对于您的目的而言，它可能已经足够接近了。您的来电。

Answer 2

您可以使用 :before 和 :after 选择器。您可以阅读更多关于它们的信息 here

这里还有一个fiddle

如果您有任何其他问题，请随时发表评论。

HTML

<div class="div-1"> </div>
<div class="div-2"> </div>

CSS

body{
    background:#ccc;
}
.div-1{
    width:100px;
    height:150px;
    position:relative;
    background:#fff;
}
.div-1:before{
    content:"";
    position:absolute;
    border:20px solid transparent;
    border-right:100px solid #fff;
    border-top:0px;
    bottom:-20px;
    left:-20px;
}

.div-2{
    width:100px;
    height:50px;
    position:relative;
    background:#fff;
    margin-top:30px;
}
.div-2:before{
    content:"";
    position:absolute;
    border:20px solid transparent;
    border-left:100px solid #fff;
    border-bottom:0px;
    top:-20px;
    right:-20px;    
}

Answer 3

我试了一下 here is my working fiddle。

我在伪元素上使用了 CSS3 transform: skew。

HTML

<div class="container">
    <div class="slope">content 2</div>
    <div class="slope">content 1
        <br/>text</div>
    <div class="slope">content 3
        <br/>text
        <br/>text</div>
</div>

CSS

*, *:before, *:after {
    box-sizing: border-box;
}
body {
    background: #ddd;
}
.container {
    /*border: 1px solid red;*/
    padding: 0 3px 0 0;
    overflow: hidden;
}
.slope {
    width: 100%;
    padding: 5px;
    margin: 0 0 40px;
    position: relative;
    background: #fff;
}
.slope:before {
    content:"";
    width: 100%;
    height: calc(100% + 26px);
    position: absolute;
    top: -13px;
    left: 0px;
    z-index: -1;
    background: #fff;
    box-shadow: 1px 2px 3px 0px rgba(0, 0, 0, 0.4);
    transform: skew(0deg, 2deg);
}
.slope:last-of-type {
    margin-bottom: 5px;
    box-shadow: 1px 2px 3px 0px rgba(0, 0, 0, 0.4);
}
.slope:last-of-type:before {
    margin-bottom: 0px;
    height: calc(0% + 26px);
    box-shadow: none;
}

备注：

根据 div 的大小，您可能需要使用 transform: skew(Ndeg) 和 height: calc(100% + Npx)
您可能还需要供应商前缀
不确定响应能力，但根据我的测试，它可以工作很好。

<div> 有倾斜的边缘和盒子阴影

<div> with a sloped edge and box-shadow

html

css

box-shadow