html - 傾斜したエッジとボックス シャドウを使用

Question

HTML と CSS で次のモックアップを作成するにはどうすればよいですか?

運が悪いので<div>、傾斜したエッジを作成するためにセパレートを追加しようとしました。transform: rotate();

主に、私が達成したいことは次のとおりです。

• コンテンツを持つ2 つ<div>の要素
• 2 つの<div>要素には傾斜したエッジと影があります

Answer 1

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