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

时间:2015-07-14 22:46:58

标签: html css html5 css3 box-shadow

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

<div> with sloped edge

我尝试添加一个单独的<div>来使用transform: rotate();创建倾斜边缘但没有运气。

主要是,我想要实现的目标是:

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

2 个答案:

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