html - ネストされた歪んだ div とそれらを正しく埋めるにはどうすればよいですか?

Question

CSS と HTML を使用して、必要なレイアウトを作成するのに問題があります。

私がしようとしているのは、見出しが歪んだ div であり、x 軸に沿ってまっすぐな背景を持っています。以下の画像に似たもの：

ここでわかるように、これまでのところ、私の試みは無駄でした。外側のdivのポイントの幅全体に拡張するには、内側のdivが必要です。

誰にもアイデアはありますか？

Answer 1

プロパティを試してみることをお勧めしますborder-width。これで問題が解決します。ここにフィドルがあります

HTML:

<div class="abc">&nbsp;</div>

CSS:

.abc {
    width: 200px;
    height: 0px;
    border-color: lightgray transparent;
    border-style: solid;
    border-width: 350px 350px 0px 0px;
    position:relative;
    display:block;
    margin-left:50px;
}

お役に立てれば。