html - ccsのみで三角形と正方形を作成する方法は？

Question

その上にcssだけで正方形と三角形を作成したいので、

1. 三角形にダイナミックなテキストを書くことができました
2. 実行時にcssを使用して三角形の色を動的に設定するのは簡単です。

Answer 1

これを行う1つの方法は次のとおりです。

http://jsfiddle.net/VWdxj/

HTML

<div class="container">
    <div class="content">Hello World</div>
    <div class="triangle"></div>
</div>

CSS

.container{
    border:1px solid #000;
    position:relative;
}
.content{
    z-index:500;
    position:absolute;
    top:230px;
    left:120px;
    color:#fff;
}
.triangle{
    border-color: #fff #fff red #fff;
    border-width:160px;
    border-style:solid;
    width:0;
    height:0;
    position:absolute;
    top:0;
    left:0;
    z-index:2;
}