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属性

css绘制梯形图形，及显示矩形图片相关推荐

css绘制不规则图形
CSS绘制不规则图形在实际开发中,经常会遇到绘制图形(图标)的需求,比如:箭头图表.不规则图形.规则图形: 常见方法对于图形的实现,可以大体上分为几种做法 (1) 背景图片,请UI小姐姐帮你吧-- ...
css一些特殊的图形,CSS 绘制特殊图形
先来绘制一个简单基础容器 CSS 绘制特殊图形 div { width: 300px; height: 300px; background: orange; border: 30px solid; b ...
CSS 魔法系列：纯 CSS 绘制基本图形（圆、椭圆等）
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
CSS 魔法系列：纯 CSS 绘制各种图形《系列五》
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
如何在matlab里输入复杂公式_[转载]如何在Matlab绘制的图形中显示复杂公式
Matlab文本的Interpreter属性使我们能在图形中显示一个较为复杂的公式,例如在公式中除了有希腊字母外,还有分号.根号等数学符号. 当键入:>> set(text,'Interp ...
IOS 绘制基本图形(画文字、图片水印）
- (void)drawRect:(CGRect)rect {// Drawing code// [self test]; // 1.加载图片到内存中UIImage *image = [UIImage ...
css绘制梯形、直角三角形
改老外的模板是看到了这个效果看其源代码写了个demo 完整代码如下: <!DOCTYPE html> <html lang="en"> <head& ...
用CSS绘制最常见的40种形状和基本图形
今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形,里面有最简单的矩形.圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和网站小图标,真的非常强大,分享给大家. Square(正方 ...
python的turtle怎么画曲线_利用 turtle库绘制简单图形
turtle库是python的基础绘图库,这个库被介绍为一个最常用的用来介绍编程知识的方法库,其主要是用于程序设计入门,是标准库之一,利用turtle可以制作很多复杂的绘图. turtle名称含义为& ...

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

梯形

css绘制梯形图形，及显示矩形图片相关推荐

最新文章

热门文章