苏飞论坛

标题: css-绘制平行四边形 [打印本页]

---

作者: xyc    时间: 2021-6-24 16:40
标题: css-绘制平行四边形
    咱们继续之前说的css实现图形的效果方法，今天来说说平行四边形的实现方法。
    原理：使用transform使长方形倾斜一个角度。

   效果：
    (, 下载次数: 5)

上传

点击文件名下载附件
   HTML：
   

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

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

   css样式：
   

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

.div {

            width: 120px;

            height: 80px;

            float: left;

            margin-left: 10px;

            -webkit-transform: skew(30deg);

            -moz-transform: skew(230deg);

            -o-transform: skew(30deg);

            transform: skew(30deg);

            background-color: #2eda01;

           }

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

---

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

Powered by Discuz! X3.4