css - 添付画像のような背景をCSSで作る

Question

cssで添付画像のような背景を作るにはどうすればいいですか？黒い部分のような形にできるようにボーダーを試してみましたが、その場合はテキストを書くことができないので、平行四辺形のボーダー形状は他のアイデアでうまくいかないのでしょうか?

Answer 1

次のように書くことができます: CSS

.tab{
    width:200px;
    height:40px;
    position:relative;
    background:#000;
}
.tab:after{
    content:'';
    right:-40px;
    top:0;
    position:absolute;
    width:0;
    height:0;
    border-width:20px;
    border-color: transparent transparent #000 #000;
    border-style:solid;
}

これをチェックしてくださいhttp://jsfiddle.net/696Sb/

Y0u は、これに css3 変換を使用することもできます。次のように書きます。

.tab:after{
    content:'';
    right:-30px;
    top:10px;
    position:absolute;
    width:60px;
    height:60px;
    background:#000;
    -moz-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    transform:rotate(45deg);
}

これをチェックしてくださいhttp://jsfiddle.net/696Sb/1/

Answer 2

CSS で対角線/三角形を作成するための 2 つのチュートリアルを次に示します。

• CSS で対角線を作成する方法
• CSS トライアングル

一番上の黒い横線（対角線の左、左）の下に書き込めるようにしますか？

Answer 3

ちょっと今、あなたはこのようにcssの前後のプロパティを使用してこれを行うことができます

HTML

<div class="shape"></div>

CSS

    .shape{
background:#000;
    margin:40px 20px;
    height:100px;
    width:700px;
    position:relative;
}
.shape:after{
content:'';
position:absolute;
    top:-20px;
    right:0;
    height:20px;
    border-left:solid 30px #000;
    border-right:transparent 30px solid;
        border-top:transparent 20px solid;
}


.shape:before{
content:'';
position:absolute;
    top:-20px;
    left:0;
    right:60px;
    height:20px;
background:#000;
}

ライブデモhttp://jsfiddle.net/uuxd8/

更新しました

ライブ デモ 2 http://jsfiddle.net/uuxd8/1/