html - 带有倾斜边缘和箱形阴影

Question

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

我尝试添加一个分隔<div>来创建倾斜的边缘transform: rotate();，但没有成功。

主要是，我想要实现的是：

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

Answer 1

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

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

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

Answer 2

我试了一下，这是我的工作小提琴。

我在伪元素上使用了 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)
• 您可能还需要供应商前缀
• 不确定响应能力，但根据我的测试，它工作正常。

Answer 3

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

这里还有一个小提琴

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

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