實現(xiàn)一個平行四邊形

svtter 發(fā)布于2019-08-02 14:18 / 3637人閱讀

摘要：無奈之下谷歌，網(wǎng)友們提供了兩個實現(xiàn)方式，第一個是通過的方式，這個比較第二種方式很吸引人，原來變換中除了我上面提到的三種方式之外，還有一個，英文意思是歪曲，正是實現(xiàn)平行四邊形的利器。

需求如題，想了下用普通的變換如旋轉、縮放、位移都是無法實現(xiàn)的。
無奈之下谷歌，網(wǎng)友們提供了兩個實現(xiàn)方式，第一個是通過border的方式，這個比較tricky；第二種方式很吸引人，原來變換中除了我上面提到的三種方式之外，還有一個skew，英文意思是歪曲，正是實現(xiàn)平行四邊形的利器。

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

接下來我們看看這個skew函數(shù)怎么工作的
從MDN網(wǎng)站上看到的介紹
skew(ax, ay)
其中

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

字面意思是沿著x軸進行變形，那就是相對縱軸變形了；同理ay是沿著y軸，就是相對x軸變形。

還有這么一句話規(guī)定了變形的規(guī)則

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);中第一個參數(shù)表示沿著x軸的變化，就是相對y軸的變化，這個變化值是15deg，正好就是我們畫出的效果圖。

再來看看上面提到的用border如何實現(xiàn)。
實現(xiàn)思路是通過拼兩個三角形來模擬平行四邊行，而矩形又可以通過border來實現(xiàn)，我們先看看如何實現(xiàn)一個三角形

如圖可以隱藏另外三個邊來實現(xiàn)一個三角形，兩個三角形就可以形成一個平行四邊形
三角形的斜率可以通過寬高比不同來實現(xiàn)。

 
 .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云服務器云服務器實現(xiàn)一個webrtc html平行提交 java實現(xiàn)一個線程 python 平行線

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/53709.html

用 CSS 實現(xiàn)三角形與平行四邊形

摘要：所以我們需要加一個內(nèi)層元素，并對內(nèi)層元素做一次逆向的歪曲，從而得到我們想要的效果實現(xiàn)代碼如下，另附示例上海總結第一種方法使用屬性出三角形，并通過對三個元素進行拼接最終實現(xiàn)了平行四邊形而第二種方法則通過來得到平行四邊形。本文最初發(fā)布于我的個人博客：咀嚼之味最近在逛某個技術網(wǎng)站的時候，感覺文章關鍵詞上的樣式好酷炫啊。于是我將那種寫法照搬到了我的博客中，也許最近逛過我博客的小伙伴已經(jīng)發(fā)現(xiàn)...

Martin91 2019-08-28 18:14 評論0 收藏0
實現(xiàn)一個平行四邊形

摘要：無奈之下谷歌，網(wǎng)友們提供了兩個實現(xiàn)方式，第一個是通過的方式，這個比較第二種方式很吸引人，原來變換中除了我上面提到的三種方式之外，還有一個，英文意思是歪曲，正是實現(xiàn)平行四邊形的利器。需求如題，想了下用普通的變換如旋轉、縮放、位移都是無法實現(xiàn)的。無奈之下谷歌，網(wǎng)友們提供了兩個實現(xiàn)方式，第一個是通過border的方式，這個比較tricky；第二種方式很吸引人，原來變換中除了我上面提到的三種...

JayChen 2019-08-30 15:55 評論0 收藏0
王飛躍等：生成式對抗網(wǎng)絡 GAN 的研究進展與展望

摘要：引用格式王坤峰，茍超，段艷杰，林懿倫，鄭心湖，王飛躍生成對抗網(wǎng)絡的研究與展望自動化學報，論文作者王坤峰，茍超，段艷杰，林懿倫，鄭心湖，王飛躍摘要生成式對抗網(wǎng)絡目前已經(jīng)成為人工智能學界一個熱門的研究方向。本文概括了的研究進展并進行展望。 3月27日的新智元 2017 年技術峰會上，王飛躍教授作為特邀嘉賓將參加本次峰會的 Panel 環(huán)節(jié)，就如何看待中國 AI學術界論文數(shù)量多，但大師級人物少的現(xiàn)...

xiaokai 2019-04-25 18:10 評論0 收藏0
MEXC Global科普：Polkadot波卡平行鏈插槽拍賣是什么

摘要：波卡平行鏈插槽拍賣在即，一文帶你了解波卡的架構以及插槽拍賣的機制。要成為波卡的平行鏈，則必須通過插槽來接入。波卡將使用一個基于的隨機信標，來追溯確定拍賣的結束時間。其由波卡網(wǎng)絡提供支持，由進行開發(fā)。 Polkadot波卡平行鏈插槽拍賣在即，一文帶你了解波卡的架構以及插槽拍賣的機制。波卡區(qū)...

Dr_Noooo 2021-11-11 16:54 評論0 收藏0