html - 下三角でdivを作る

Question

私はdivで白い形をしようとしています:

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

div の下部の対角線形状を取得するにはどうすればよいですか?

私はdivのためにこれを持っています: width: 620px; 高さ: 440px; 背景色: 白;

ありがとうございました

編集：divの背後にあるbgを忘れてください。最上層にあるため、bgの助けを借りずに、斜めの境界線でdivを作成したいです

Answer 1

:afterボーダーと疑似セレクターを使用することもできます: 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 行の境界線の幅を調整して、必要なヒントを取得します。

編集。：

互換性の参照: http://caniuse.com/css-gencontent

編集2：

:afterセマンティクスと引き換えに、疑似セレクターではなく内部要素にスタイルを配置できる、より多くのクロスブラウザーを取得できます。

Answer 2

最も単純な (コード量が少ない)方法: CSS を使用するだけhttp://dabblet.com/gist/3610406linear-gradient

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: http://dabblet.com/gist/3610548

HTML:

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

CSS:

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