css3-绘制菱形 - 苏飞论坛

上传

点击文件名下载附件
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实现其他图形的样式方法。希望大家多多关注！

作者: 范范 时间: 2021-6-22 16:14
支持下

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