[CSS3] 利用css製作八卦圖形

利用CSS3中的transform屬性，再加上overflow，我們可以讓不同的塊級元素變成像是遮罩(Mask)一樣，做出一些奇特的圖型。

HTML的部份：

<div id="mask-outer">
  <div id="mask-inner">
    <div id="obj">&nbsp;</div>
  </div>
</div>

CSS的部份：

#mask-outer{overflow: hidden;width: 200px;height:200px;}
    #mask-inner{
        width:200px;height: 200px;
        -moz-transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        transform: rotate(-45deg);
        overflow: hidden;
    }
    #obj{
        width:200px;height: 200px;background-color: #0099FF;
        -moz-transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
    }

直接看範例：