メイクのdiv

Question

私はdiv要素で白い形状をやろうとしてきた：

http://sircat.net/joomla/sircat/mies/2.png

は、どのように私はdiv要素の下の斜めの形状を得るのですか？

私はdivのためにこれを持っている： 幅：620px; 身長：440px; 背景色：白;

はあなたに

編集に感謝：それは最上層にあるのでちょうど、私がいないBGの助けを借りて、斜めの罫線でのdivを作りたいのdivの背後にあるBGを忘れ

Answer 1

：http://jsfiddle.net/qQySU/

#pointed { 
    position: relative; 
    margin: 0 auto; 
    width: 200px; 
    height: 200px; 
    background-color: white; 
} 

#pointed:after, 
#pointed::after { 
    position: absolute; 
    top: 100%; 
    left: 50%; 
    margin-left: -50%; 
    content: ''; 
    width: 0; 
    height: 0; 
    border-top: solid 150px red; 
    border-left: solid 100px transparent; 
    border-right: solid 100px transparent; 
} 

を私は国境を容易に識別のための先端を色付けしました。あなたが望むヒントを得るには、最後の3行の境界線の周りを再生します。

編集：compabilityため

参考：http://caniuse.com/css-gencontent

編集2：

セマンティクスと引き換えに、あなたはそれがより多くのcrossbrowserあなたは、内側にstleを配置することができます得ることができます要素の代わりに:after疑似セレクタを使用します。

Answer 2

最も簡単な（コードの最低額）方法：ちょうどCSSを使用linear-gradienthttp://dabblet.com/gist/3610406

HTML：

<div class='box'>Text goes here...</div> 

CSS：

.box { 
    width: 26em; 
    min-height: 31em; 
    padding: 1em; 
    outline: solid 1px lightblue; 
    margin: 0 auto; 
    background: linear-gradient(45deg, dimgrey 47%, black 50%, transparent 50%) 
        no-repeat 0 100%, 
       linear-gradient(-45deg, dimgrey 47%, black 50%, transparent 50%) 
        no-repeat 100% 100%;; 
    background-size: 50% 14em; 
} 

---

より良い互換性&が良いを探して：あなたはbox-shadowでpseudo-elementを使用することができます。http://dabblet.com/gist/3610548

HTML：

<div class='box'>text goes here... hover me ;)</div> 

はCSS：

01あなたはまた、国境や :after擬似セレクタを使用することができます

html { background: darkgrey; } 
.box { 
    box-sizing: border-box; 
    position: relative; 
    width: 20em; 
    height: 20em; 
    padding: 1em; 
    margin: 3em auto 0; 
    background: white; 
} 
.box:before { 
    position: absolute; 
    right: 14.65%; /* 50% - 35.35% */ bottom: -35.35%; /* half of 70.71% */ 
    width: 70.71%; /* 100%*sqrt(2)/2 */ 
    height: 70.71%; 
    box-shadow: 2px 2px 1px dimgrey; 
    transform: rotate(45deg); 
    background: white; 
    content: ''; 
} 
.box:hover, .box:hover:before { 
    background: plum; 
}