CSS3绘制不规则图形的一些方法示例
uml.org.cn & 11-07 11:24:51 & 作者：佚名 &
这篇文章主要介绍了CSS3绘制不规则图形的一些方法示例,包括polygon()的使用等很多实用技巧,需要的朋友可以参考下
CSS 创建复杂图形的技术即将会被广泛支持，并且应用到实际项目中。本篇文章的目的是为大家开启它的冰山一角。我希望这篇文章能让你对不规则图形有一个初步的了解。
现在，我们已经可以使用CSS 3 常见不规则复杂图形了，如下图所示：
使用CSS创建的图形，无法内置文字或实现文字环绕效果。因此，如何实现不规则图形和文字复杂布局也成为了一个热议话题。
今天我们就来介绍一下如何实现这个效果。文章中我们将阐述如何使用 CSS创建不规则图形，实现不规则的文本布局。学会如何创建不规则图形之后，你就可以发挥想象力，创建唯美的CSS页面了，下图既是使用该技术创建的《爱丽丝梦游仙境》效果图：
注：这是CSS的最新技术，所以对浏览器版本要求较高。如果需要查看在线示例你需要确保浏览器支持这个CSS技术。在本文中我也将提供一些效果截图查看效果。
我们需要使用shape-outside 属性声明不规则图形。当前， shape-outside 属性只能被应用于浮动元素，并且只能应用于块级元素。如果需要在非块级元素上使用这些属性，必须先把元素声明为块级。
Shape-* 值有三种赋值方式: 自动，基本图形或者图片链接。如果被设置为自动，浮动元素将继续作为传统的盒模型进行渲染。如果你还不熟悉盒模型，请参考CSS盒模型，这是阅读本篇文章的基础。
绘制方法包括：rectangle、inset-rectangle、circle、ellipse或polygon方法等。你可以通过链接查看详细的描述。
如果属性被设置为图片链接， 浏览器会按照图片的&alpha通道&来绘制图形形状。
在元素上创建坐标系
声明了CSS 图形之后，我们首先需要创建将用于绘制图形的坐标系。
坐标系是非常必要的，因为图形需要依据此坐标系上的点阵进行绘制。shape-* 属性是基于盒模型的，为了使它启作用，需要明确指定盒子的大小，限制不规则图形在盒子范围内，它也将被用于创建绘制坐标系，坐标系的起点位于形盒子左上角。如果没有明确宽和高声明， shape-* 属性将不启作用。
设置自定义图形的背景色
应用了自定义图形，它的盒模型仍然存在，其它传统的样式设置将作用于盒模型范围。例如，下面这个例子中，
我们仅仅想创建一个浮动圆形，并设置这个圆形的背景色。按照正常的思路理解，效果应该是这样的：
但是当设置了盒子的背景色后，你会发现和预期的效果不同，效果如下：
在上图中我们看到背景色被应用到盒模型范围，而不是我们预想的圆形内。
那么，我们应该怎样设置圆形的背景色呢？这就引出了一个新的CSS样式： clip-path 。clip-path 用于限制当前样式的作用范围。在下面的例子中你将看到它的使用方法。
现在，shape-outside 属性只作用域浮动的元素，并且仅限制于在块级元素上应用。使用这些属性定义的元素，其周围的文本将依赖于图形形状排布。未来的CSS 形状将不仅仅限制与应用于浮动元素上，我们将不仅仅可以在文本外部的图形上做文章，完全可以在其内部定义自定义图形，实现如下效果：
实例-使用shape-outside 创建环绕于自定义形状的浮动文本
我们从一个简单的例子开始。在实例中我们将创建一个自定义图形，并且内置文本流，最终效果图如下（文章末尾提供实例下载链接）：
例子中我们拥有两个容器，用于设置自定义形状和嵌套文本内容。代码如下：
&div&class=&container&& &&
&div&class=&shaped&&&/div& &&
&div&class=&content&& &&
&h1&&span&La&/span&&Tour&&br/&Eiffel&/h1& &&
&p&Lorem&Ipsum.....&/p& &&
首先我们需要声明浮动区域的DIV节点，并且使用固定值设置大小。代码如下：
.container{ &&
overflow:hidden; &&
height:&100 &&
width:&100 &&
.shaped{ &&
float:left; &&
height:100 &&
width:40 &&
float:rightright; &&
background:&black&url（../images/eiffel.jpg）&center&top&no-repeat; &&
background-size: &&
现在坐标系已经创建成功，接下来我们将要绘制图形了。可以通过两种方式来绘制图形：
使用polygon（）
我们可以使用polygon() 方法来计算图形范围。这个方法从坐标系中获取多个点用于绘制图形，每个点由(x, y)值定位。 例子中我们将要创建一个非常简单的多边形，如下图所示：
坐标点的单位可以是固定值，或者百分比。在这个例子中我们将以百分比的形式设置点阵位置。接下来我们需要应用这个样式在浮动元素上。
.shaped{ &&
shape-outside:&polygon（0&0,&100%&0,&100%&100%,30%&100%）; &&
shape-margin:&20px; &&
应用以上的样式后，一个不规则的图形-梯形产生了。
可以看到代码中使用了shape-margin 属性，它用于设置图形和文本内容之间的边距。
接下来需要添加背景图，需要注意在添加背景图之后，它将被应用于盒模型，目前为止效果如下：
所以，为了达到预期效果，我们需要设置clip-path 属性，并且设置其范围和shape-outside 属性相同。
.shaped{ &&
clip-path:&polygon（0&0,&100%&0,&100%&100%,30%&100%）; &&
现在，我们就通过polygon() 方法实现了目标效果。
使用图片链接
我们也可以通过图片（严格说是拥有通明区域的图片）来创建不规则图形，依据图片的&alpha通道& 生成不规则图形。
例如，替代polygon() 声明方法。我们可以设置shape-outside 属性值为图片URI，浏览器就会自动依据图片来绘制不规则图形。
图片中的透明部分将被声明为文本元素的浮动部分。其余部分被声明为不规则图形。代码如下：
.shaped{ &&
shape-outside:&url（/images/mm.png）; &&
shape-image-threshold:&0.5;这个属性用于设置浮动区域透明度范围 &&
上述的两种方法都拥有各自的优缺点。例如，如果图形过于复杂，通过图片方法比手动计算图形绘制节点更方便。
大家感兴趣的内容
12345678910
最近更新的内容When you go to the page
using Mobile Safari, you will see the beautiful bar on the top of the page.
I wanna draw some trapeziums (US: trapezoids) like that, but I don't know how.
Should I use css3 3d transform?
If you have a good method to achieve it please tell me.
解决方案 You can use some CSS like this:
#trapezoid {
border-bottom: 100
border-left: 50
border-right: 50
height: 0;
width: 100
&div id="trapezoid"&&/div&
It is really cool to make all this shapes, Take a look to more nice shapes at:
This css is applied to a DIV element
本文地址： &
当您使用移动Safari访问页面时，您会看到页面顶部的美丽的酒吧。
我想画一些梯形（美国：梯形），但我不知道如何。我应该使用css3 3d变换吗？
解决方案 你可以使用这样的CSS：
#trapezoid {border-bottom：100 border-left：50 border-right：50px solid透明; height：0; width：100}
& div id =“trapezoid “&& / div&
使所有这些形状，看看更好的形状：
编辑：此css适用于一个DIV元素
本文地址： &
扫一扫关注官方微信如何用CSS3生成直角梯形，原理是什么？_百度知道
如何用CSS3生成直角梯形，原理是什么？
可以用border来弄，但一直都不懂原理，求解答
我有更好的答案
&&solid，第6个div是;&&&nbsp：上边该压着左边线还是右边线，那么写浏览器内核解析css的程序员要纠结了;border-right:&30px&green&nbsp:&&nbsp.com/zhidao/wh%3D450%2C600/sign=8ad6eaaac6ceeb4fb15ed/cf1b9d16fdfaaf51a5deef01f7ad6.jpg" />如果不渲染成斜线:&div&id=&quot、三角形留下了空间，其他三条边颜色设置为透明或none，剩下的就是梯形或三角了，至于直角梯形;transparent&30px&&&&&border-right上下左右4条边;margin:&105&/div&&div&&div5&&40px&nbsp:&30&&&&border-top:&nbsp:&&&&&gt.com/zhidao/wh%3D600%2C800/sign=f94a4c20a76ef2d3ec437ed/cf1b9d16fdfaaf51a5deef01f7ad6.jpg" esrc="http://g.hiphotos:&nbsp，再看div6，相信你就明白了。上图的代码：&&&&&3&/div&&div&&nbsp，就给用边框创造梯形;&height:&0;}#div3{&&nbsp.jpg" target="_blank" title="点击查看大图" class="ikqb_img_alink"><img class="ikqb_img" src="http://g.border-30border-top:&id=&div6&&6&/div&&}#div5{&30px&&nbsp，谁压谁都不合理啊，最简单的是弄成斜线等分，还不必去写判断谁该压着谁的程序代码。于是;&&30px&&border-yellow&nbsp，观察第4个div的 none 起了什么作用;&0;50&blue&style&div{&&&&float:&&&border-top:&transparent&border-&div&id=&&border-left:&id=&div2&&2&&}#div2{width:&3030px&transparent&30px&&&&&border-div1&quot:&blue&nbsp:&/div&&&nbsp.&&}#div1{width:&0;&1&/div&&div&&border-/div&&div&id=&&&nbsp:&border-top:&30px&red&&&&nbsp:&div3&quot:&&&transparent&30px&}#div6{&&id=&div4&&4&blue&0;&gt，最关键的一点：每两条边的相交处是斜线的相交的。<a href="http:&nbsp.&30}#div4{&/style&}&lt:&&&border-&30px&width:&nbsp.hiphotos.baidu.com/zhidao/pic/item/cf1b9d16fdfaaf51a5deef01f7ad6://g
采纳率：64%
border-right: transparent 30} #div6{
width: 50 height: 0;div id=&div1&&1&lt。上图的代码;&lt: 30px red solid。于是，就给用边框创造梯形、三角形留下了空间;height: 30} #div4{
border-top上下左右4条边，最关键的一点;div id=&div2&&2&/div&
border-}#div2{width: 30height，至于直角梯形，第6个div是，观察第4个div的 none 起了什么作用，再看div6;div id=&div4&&4&
border-left: transparent 30px solid，最简单的是弄成斜线等分: 0;}#div3{width：12345678910111213141516171819202122232425262728293031323334353637383940
&/style&gt: 30
border-left: 30div id=&div5&&5&
border- &style&
border-top:
border-bottom: 40px blue solid，还不必去写判断谁该压着谁的程序代码;&lt:div id=&div6&&6&div{&/div&&lt: 30px，其他三条边颜色设置为透明或/div&/div&height: 0: transparent 30px solid。如果不渲染成斜线，那么写浏览器内核解析css的程序员要纠结了：上边该压着左边线还是右边线，谁压谁都不合理啊，相信你就明白了;
border-right:}&lt:/div&
border-right: 30} #div1{width: 0;margin: 10
border-div id=&div3&&3&lt，剩下的就是梯形或三角了;/div&} #div5{
border-top: transparent 30
border-bottom: 30px blue solid：每两条边的相交处是斜线的相交的;&lt
不过丰华股份法国恢复
直角梯形是指有一个直角的梯形。梯形两腰既不相等也不平行，两底平行，但不相等，一个腰上的两角都是直角。
2条折叠回答
为您推荐：
其他类似问题
&#xe675;换一换
回答问题，赢新手礼包&#xe6b9;
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。canvas的图形变换如何做出这样梯形的变形？_javascript吧_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0成为超级会员，使用一键签到本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：157,989贴子：
canvas的图形变换如何做出这样梯形的变形？收藏
相当于把一边缩小，transform似乎做不了？当然下面的例子里自己写方法也可以实现，但如果对复杂点的图形会非常困难吧
感觉这个应该是个3d图形的变换，css3就能做
直接每次重画四个点连线填充不就完了
line to 然后full
&div style=&#39;width: 100 height:100 margin: 50 perspective: 100&#39;&
&div style=&#39;padding: 50 background: transform: rotateY(30deg)&#39;&&/div&&/div&
直接旋转canvas。。。。
登录百度帐号推荐应用}