如何在HTML和CSS中创建以下模型?
我尝试添加一个单独的<div>
来使用transform: rotate();
创建倾斜边缘但没有运气。
主要是,我想要实现的目标是:
<div>
元素
<div>
元素具有倾斜的边缘和阴影答案 0 :(得分:5)
skew
转换可以创建斜率,但不幸的是它适用于整个div,而不仅仅是它的一个边缘。您可以使用重叠或嵌套的div在同一个框上混合直边和倾斜边 - 但是,这会使阴影有点问题(请参阅http://jsfiddle.net/z9am39sp/)。
另一个缺点是,使用此特定设置,您无法使文本适合倾斜的形状。
尽管如此,它可能足够接近您的目的。你的来电。
答案 1 :(得分:1)
您可以使用: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;
}