css-绘制五边形 - 苏飞论坛

上传

点击文件名下载附件
HTML：

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

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

css样式：

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

            .div{

              width: 60px;

              float: left;

              position: relative;

              border-width: 52px 20px 0;

              border-style: solid;

              border-color: #711ee2 transparent;

            }

            .div:before{

              content: "";

              position: absolute;

              width: 0;

              height: 0;

              top: -92px;

              left: -20px;

              border-width: 0 50px 40px;

              border-style: solid;

              border-color: transparent transparent #711ee2;

            }

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

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