css绘制梯形图形，及显示矩形图片

Dear 丶 2022-05-15 13:54 676阅读 0赞

## 梯形 ##

![20190626115936953.png][]

div+transform实现如上效果，直接拉到底部。

\-webkit-mask-image加上梯形遮罩也可实现。

**1.使用border实现。**

**等腰梯形1.1**

.trapezoid1-1 {
        width: 100px;
        height: 0;
        border-bottom: 100px solid black;
        border-right: 50px solid transparent;
        border-left: 50px solid transparent;
    }

![20190625145910971.png][]

**等腰梯形1.2**

.trapezoid1-2 {
        width: 100px;
        height: 0;
        border-top: 100px solid black;
        border-right: 50px solid transparent;
        border-left: 50px solid transparent;
    }

![20190625150421364.png][]

**等腰梯形1.3**

.trapezoid1-3 {
        width: 0;
        height: 100px;
        border-left: 100px solid black;
        border-top: 50px solid transparent;
        border-bottom: 50px solid transparent;
    }

![20190625150748961.png][]

**等腰梯形1.4**

.trapezoid1-4 {
        width: 0;
        height: 100px;
        border-right: 100px solid black;
        border-top: 50px solid transparent;
        border-bottom: 50px solid transparent;
    }

![20190625151019681.png][]

**直角梯形1.5**

.rightAngle-trapezoid{
        width: 100px;
        height: 0;
        border-right: 80px solid transparent;
        border-bottom: 80px solid red;
    }

![20190704111945980.png][]

**拓展**

.more1-1 {
        width: 0;
        height: 100px;
        border-left: 100px solid black;
        border-right: 100px solid black;
        border-top: 50px solid transparent;
        border-bottom: 50px solid transparent;
    }

![2019062515123189.png][]

.more1-2 {
        width: 0;
        height: 100px;
        border-right: 100px solid black;
        border-top: 50px solid transparent;
        border-bottom: 50px solid transparent;
        text-align: center;
        color: #fff;
        line-height: 100px;
        border-radius: 50%;
        box-shadow: 10px 10px 16px 10px #9e9e9ec4;
        text-shadow: 4px 6px 3px #c0c0c0;
    }

![20190625153328230.png][]

发现有趣的图形实在太快乐，止不住想继续探索。

**2.transform旋转实现**

以div的下边作旋转底，设置视距perspective和围绕x轴旋转角度。

perspective属性用来设置视点位置，视点始终在z轴上。正常情况下，视点和我们眼睛观察的方向一致，所以只有在元素的前方才能看见元素的变化。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lvdVppX1g_size_16_color_FFFFFF_t_70][]

.trapezoid2-1 {
        position: relative;
        width: 100px;
        height: 50px;
        text-align: center;
        line-height: 50px;
        color: #fff;
    }
    
    .trapezoid2-1:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: -1;
        background-color: #000;
        transform-origin: bottom;
        transform: perspective(100px) rotateX(30deg);
    }

![20190625162531163.png][]

也可以将文字写在伪元素的content中，但是旋转后，字体同样会出现变化。

**拓展**

当元素同时改变两边位置，就会形成直角梯形。

.more2-1 {
        position: relative;
        width: 100px;
        height: 50px;
        text-align: center;
        line-height: 50px;
        color: #fff;
    }
    
    .more2-1:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: -1;
        background-color: #000;
        transform-origin: bottom left;
        transform: perspective(100px) rotateX(30deg);
    }

![20190625171152609.png][]

**3.使用倾斜【skew】和超出隐藏【overflow：hidden】切割出梯形。**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lvdVppX1g_size_16_color_FFFFFF_t_70 1][]

要注意的是，设置元素转换的基点位置。此处以上窄下宽的等腰梯形为例子，所以以bottom为基准。

**html**

**css**

.skew-elm1{    
        width: 240px;
        height: 250px;
        transform-origin: bottom;
        transform: skew(8deg, 0deg);
        -ms-transform: skew(8deg, 0deg);
        -moz-transform: skew(8deg, 0deg);
        -webkit-transform: skew(8deg, 0deg);
        -o-transform: skew(9deg, 0deg);
        overflow: hidden;
        border-radius: 0px 10px 20px 0px;
    }
    
    .skew-elm2{    
        width: 240px;
        height: 250px;
        transform-origin: bottom;
        transform: skew(-16deg, 0deg);
        -ms-transform: skew(-16deg, 0deg);
        -moz-transform: skew(-16deg, 0deg);
        -webkit-transform: skew(-16deg, 0deg);
        -o-transform: skew(-16deg, 0deg);
        overflow: hidden;
        border-radius: 10px 0px 0px 20px;
    }
    
    .con{
        width: 240px;
        height: 250px;
        background-color: salmon;
    }

![20190626102531301.png][]

改变初始转动方向，可以改变梯形的顶部朝向。

此方法可在图片上形成矩形显示框展示图片，在con中添加底图即可。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lvdVppX1g_size_16_color_FFFFFF_t_70 2][]

添加地图后，发现图片并没有摆正，底图需要矫正的角度deg(.con)，0=deg(.con)+deg(.skew-elm1)+deg(.skew-elm2)。

.con{
        width: 240px;
        height: 250px;
        background-color: #009688;
        transform-origin: bottom;
        transform: skew(8deg, 0deg); 
        -ms-transform: skew(8deg, 0deg);
        -moz-transform: skew(8deg, 0deg);
        -webkit-transform: skew(8deg, 0deg);
        -o-transform: skew(8deg, 0deg);
        background-image: url(./img/1.jpg);
    }

效果如下

![20190626115936953.png][]

使用-webkit-mask-image加上梯形遮罩实现上诉效果。

html

css【宽高为遮罩大小】

.trapezoidal-mask{
        width: 240px;
        height: 290px;
       -webkit-mask-image: url(img/masking.png);
        background-image: url(./img/cs.jpg);
    }

原图：                                                            遮罩图如下：                                                                             效果如下：

![20190704151852599.jpg][]              ![20190704151911379.png][]                      ![20190704151327492.png][]

**[css中mark属性][css_mark]**

[20190626115936953.png]: /images/20220503/faaa24ff8cb9492992a7e9faf51bcc57.png
[20190625145910971.png]: /images/20220503/99fbda9af2d246519fbdb8191ab59d11.png
[20190625150421364.png]: /images/20220503/2505956732b246ef8b0ae79f2322c211.png
[20190625150748961.png]: /images/20220503/8d863433c5e1467399a30ad339a9fa60.png
[20190625151019681.png]: /images/20220503/79ebd5757ac1456fa11d2db7ec00f185.png
[20190704111945980.png]: /images/20220503/553b6be456d746fd8d343f87a22592ca.png
[2019062515123189.png]: /images/20220503/0b8012d21fcf4bd3b14b2c826b73c1da.png
[20190625153328230.png]: /images/20220503/474aec32f4cb4214b16faaa038aa74ad.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lvdVppX1g_size_16_color_FFFFFF_t_70]: /images/20220503/a0f602de293b49abad9afff9b5a41ae0.png
[20190625162531163.png]: /images/20220503/73661eeb1f684a739f610f01d0487483.png
[20190625171152609.png]: /images/20220503/fb438be54f0c4513b233d5667680cee6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lvdVppX1g_size_16_color_FFFFFF_t_70 1]: /images/20220503/06f8cb9cd4c84b97b60d8ca15f251960.png
[20190626102531301.png]: /images/20220503/b9e282af715f4c4e8c27960e83ae5a21.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lvdVppX1g_size_16_color_FFFFFF_t_70 2]: /images/20220503/1190e9b8c07346d99a963da696cfb2ee.png
[20190704151852599.jpg]: https://img-blog.csdnimg.cn/20190704151852599.jpg
[20190704151911379.png]: https://img-blog.csdnimg.cn/20190704151911379.png
[20190704151327492.png]: /images/20220503/20355553193c419a898f43c78474996f.png
[css_mark]: https://developer.mozilla.org/en-US/docs/Web/CSS/mask