梯形
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);
}
原图: 遮罩图如下: 效果如下: