css-绘制钻石效果

xyc

      咱们继续之前说的css实现图形的效果方法，今天来说说钻石的实现方法。
      原理：上面一个梯形，下面一个三角形组成。
      效果：
      
      HTML：
      

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

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

      css样式：
      

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

.div{
 width: 50px;
 height: 0;
 float: left;
 border-style: solid;
 border-color: transparent transparent #9aff02 transparent;
 border-width: 0 25px 25px 25px;
 position: relative;
 margin: 20px 0 50px 0;
}
.div:after{
 width: 0;
 height: 0;
 top: 25px;
 left: -25px;
 border-style: solid;
 border-color: #9aff02 transparent transparent transparent;
 border-width: 70px 50px 0 50px;
 position: absolute;
 content: "";
}

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

范范

支持支持