css3-绘制菱形

xyc

  上篇我们说到了椭圆的实现方法，今天就说下菱形的css绘制方法。

   菱形：使用transform和rotate相结合，使两个正反三角形上下显示
    效果：
   
  HTML代码：
  

[HTML] 纯文本查看 复制代码

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

css样式：

[CSS] 纯文本查看 复制代码

	   .div {
	    width: 100px;
	    height: 100px;
	    float: left;
	    background: #e9880c;
	    /* Rotate */
	    -webkit-transform: rotate(-45deg);
	    -moz-transform: rotate(-45deg);
	    -ms-transform: rotate(-45deg);
	    -o-transform: rotate(-45deg);
	    transform: rotate(-45deg);
	    /* Rotate Origin */
	    -webkit-transform-origin: 0 100%;
	    -moz-transform-origin: 0 100%;
	    -ms-transform-origin: 0 100%;
	    -o-transform-origin: 0 100%;
	    transform-origin: 0 100%;
	    margin: 40px 0 10px 240px;
	   }

以上就是菱形的实现效果，后面会继续给大家说说css实现其他图形的样式方法。希望大家多多关注！

范范

支持下