实现一个平行四边形

svtter 发布于2019-08-02 14:18 / 3572人阅读

摘要：无奈之下谷歌，网友们提供了两个实现方式，第一个是通过的方式，这个比较第二种方式很吸引人，原来变换中除了我上面提到的三种方式之外，还有一个，英文意思是歪曲，正是实现平行四边形的利器。

需求如题，想了下用普通的变换如旋转、缩放、位移都是无法实现的。
无奈之下谷歌，网友们提供了两个实现方式，第一个是通过border的方式，这个比较tricky；第二种方式很吸引人，原来变换中除了我上面提到的三种方式之外，还有一个skew，英文意思是歪曲，正是实现平行四边形的利器。

width: 200px;
height: 100px;
background-color: blue;
transform: skew(15deg,0);

接下来我们看看这个skew函数怎么工作的
从MDN网站上看到的介绍
skew(ax, ay)
其中

ax Is an  representing the angle to use to distort the element
along the abscissa.

字面意思是沿着x轴进行变形，那就是相对纵轴变形了；同理ay是沿着y轴，就是相对x轴变形。

还有这么一句话规定了变形的规则

The coordinates of each point are modified by a value proportionate to
the specified angle and the distance to the origin; thus, the farther
from the origin a point is, the greater will be the value added it.

这句话告诉我们离原点越远的坐标改变越大，而且这种改变是等比例的。

我们了解下屏幕坐标系长什么样子。

可以看到原点在左上角，x轴向右延伸，y轴向下延伸。
回头看上面的例子transform: skew(15deg,0);中第一个参数表示沿着x轴的变化，就是相对y轴的变化，这个变化值是15deg，正好就是我们画出的效果图。

再来看看上面提到的用border如何实现。
实现思路是通过拼两个三角形来模拟平行四边行，而矩形又可以通过border来实现，我们先看看如何实现一个三角形

如图可以隐藏另外三个边来实现一个三角形，两个三角形就可以形成一个平行四边形
三角形的斜率可以通过宽高比不同来实现。

 
 .orgram:before {
    content: "";
    display:block;
    position: absolute;
    border: 10px solid transparent;
    border-top-color: red;
    height: 0px;
    width: 0px;
}

.orgram:after {
    content: "";
    display:block;
    position: absolute;
    left: 18px;
    margin-top:-10px;
    border: 10px solid transparent;
    border-bottom-color: red;
    height: 0px;
    width: 0px;
}

云服务器 GPU云服务器实现一个webrtc html平行提交 java实现一个线程 python 平行线

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/53709.html

用 CSS 实现三角形与平行四边形

摘要：所以我们需要加一个内层元素，并对内层元素做一次逆向的歪曲，从而得到我们想要的效果实现代码如下，另附示例上海总结第一种方法使用属性出三角形，并通过对三个元素进行拼接最终实现了平行四边形而第二种方法则通过来得到平行四边形。本文最初发布于我的个人博客：咀嚼之味最近在逛某个技术网站的时候，感觉文章关键词上的样式好酷炫啊。于是我将那种写法照搬到了我的博客中，也许最近逛过我博客的小伙伴已经发现...

Martin91 2019-08-28 18:14 评论0 收藏0
实现一个平行四边形

摘要：无奈之下谷歌，网友们提供了两个实现方式，第一个是通过的方式，这个比较第二种方式很吸引人，原来变换中除了我上面提到的三种方式之外，还有一个，英文意思是歪曲，正是实现平行四边形的利器。需求如题，想了下用普通的变换如旋转、缩放、位移都是无法实现的。无奈之下谷歌，网友们提供了两个实现方式，第一个是通过border的方式，这个比较tricky；第二种方式很吸引人，原来变换中除了我上面提到的三种...

JayChen 2019-08-30 15:55 评论0 收藏0
王飞跃等：生成式对抗网络 GAN 的研究进展与展望

摘要：引用格式王坤峰，苟超，段艳杰，林懿伦，郑心湖，王飞跃生成对抗网络的研究与展望自动化学报，论文作者王坤峰，苟超，段艳杰，林懿伦，郑心湖，王飞跃摘要生成式对抗网络目前已经成为人工智能学界一个热门的研究方向。本文概括了的研究进展并进行展望。 3月27日的新智元 2017 年技术峰会上，王飞跃教授作为特邀嘉宾将参加本次峰会的 Panel 环节，就如何看待中国 AI学术界论文数量多，但大师级人物少的现...

xiaokai 2019-04-25 18:10 评论0 收藏0
MEXC Global科普：Polkadot波卡平行链插槽拍卖是什么

摘要：波卡平行链插槽拍卖在即，一文带你了解波卡的架构以及插槽拍卖的机制。要成为波卡的平行链，则必须通过插槽来接入。波卡将使用一个基于的随机信标，来追溯确定拍卖的结束时间。其由波卡网络提供支持，由进行开发。 Polkadot波卡平行链插槽拍卖在即，一文带你了解波卡的架构以及插槽拍卖的机制。波卡区...

Dr_Noooo 2021-11-11 16:54 评论0 收藏0