css绘制梯形图形，及显示矩形图片_css直角梯形带背景图

梯形

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;
}

等腰梯形1.2

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

等腰梯形1.3

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

等腰梯形1.4

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

直角梯形1.5

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

拓展

.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;
}

.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;
}

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

2.transform旋转实现

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

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

.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);
}

也可以将文字写在伪元素的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);
}

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

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

html

    <div class="skew-elm1">
        <div class="skew-elm2">
            <div class="con"></div>    
            <!--<img src="img/1.png">-->
        </div>
    </div>

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;
}

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

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

添加地图后，发现图片并没有摆正，底图需要矫正的角度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);
}

效果如下

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

html

<div class="trapezoidal-mask"></div>

css【宽高为遮罩大小】

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

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

                                    

css中mark属性