苏飞论坛

标题: css-绘制钻石效果 [打印本页]

作者: xyc 时间: 2021-7-6 18:48
标题: css-绘制钻石效果
   咱们继续之前说的css实现图形的效果方法，今天来说说钻石的实现方法。
   原理：上面一个梯形，下面一个三角形组成。
   效果：
   (, 下载次数: 13)
   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实现其他图形的样式方法。希望大家多多关注！

作者: 范范 时间: 2021-7-7 15:38
支持支持

欢迎光临苏飞论坛 (http://www.sufeinet.com/)