如何用ccs創建三角形和正方形？

Question

我想創建一個正方形，並在它的頂部僅適用於CSS三角形，所以

1. 我可以寫在三角形
2. 一些動態文本它會很容易地動態設置的三角形色彩搭配在運行時的CSS。

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