Html <；部门>；具有倾斜边缘和长方体阴影

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

带斜边“>

我已经尝试添加一个分离的

来创建倾斜边，使用

transform:rotate（）；

，但没有成功

我主要想实现的是：

• 包含内容的两个
  元素
• 这两个
  元素具有倾斜的边和阴影

---

倾斜变换可以创建坡度，但不幸的是，它适用于整个div，而不仅仅是其中的一条边。您可以使用重叠或嵌套div在同一个长方体上混合直边和倾斜边-但是，这会使阴影有点问题（请参阅）

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

---

尽管如此，它可能已经足够接近您的目的。您的通话。

您可以使用

：before

和

：after

选择器。您可以阅读有关它们的更多信息

这里还有一个

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

HTML

我给它打了一针，然后

我在一个伪元素上使用了CSS3转换：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>

注:

• 您可能需要使用

  transform:skew（Ndeg）

  和

  height:calc（100%+
  Npx）

  取决于div的大小
• 您可能还需要供应商前缀
• 不确定响应性，但根据我的测试，它是有效的 好的

---

谢谢，但这仍然有一个问题。我的设计是响应性的，使用边框无法实现100%宽度的倾斜边缘。有没有办法更改

边框右

和

边框左

的100px以使其响应？恐怕没有！在这种情况下，这是唯一可行的解决方案，您可以始终使用skew属性，但它会弄乱DIV的内容。这太聪明了！我还没想到that@kiraken谢谢！这是我第一次使用CSS3 skew属性，很难：）我决定添加计算和百分比，因为OP希望它尽可能响应，尽管记住这一点，我选择将其倾斜到1deg只是因为它可以为长div提供最佳兼容性。如果有更好的倾斜度计算，我不知道：）据我所知，对calc函数的支持不是很好。因此我建议OP不要使用它。但除此之外，我鼓励他选择你的答案。不幸的是，我的答案没有反应E

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;    
}

<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>

*, *: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;
}