一些CSS3绘制不规则图形的例子
本文主要介绍了一些CSS3绘制不规则图形的例子,包括使用聚()和大量实用技巧,你需要的朋友可以参考一下。
前言
利用CSS生成复杂图形的技术将得到广泛的支持和应用,本文的目的是为大家打开一个冰山,希望本文能对不规则图形有一个初步的了解。
现在,我们已经可以使用CSS 3常见的不规则图形,如下图所示:
用CSS创建的图形无法生成文本或实现文本包围效果,如何实现不规则图形和字符的复杂布局成为一个热门话题。
今天我们将介绍如何实现这个效果。在这篇文章中,我们将解释如何使用CSS创建不规则的图形来实现不规则的文本布局。以下是这项技术创造的爱丽丝梦游仙境的照片。
注意:这是CSS的最新技术,因此它需要更高版本的浏览器版本。如果你需要看一个在线例子,你需要确保浏览器支持这个CSS技术。
声明的图形
我们需要使用外部属性来声明不规则的图形。目前,形状外部属性只能应用于浮动元素,只能应用于块级元素。如果需要在非块元素上使用这些属性,必须首先将元素声明为块级。
对于形状*值有三种分配方式:自动的、基本的图形或图片链接。如果设置为自动化,浮动元素将继续作为传统的盒子模型呈现。如果您不熟悉Box模型,请参考CSS框模型,这是阅读本文的基础。
绘图的方法包括:矩形、圆、椭圆或插入矩形,聚。你可以通过链接查看详细描述。
如果属性设置为图片链接,则浏览器将根据图片的图(alpha通道)绘制图形的形状。
在元素上创建坐标系统
在声明CSS图形之后,我们首先需要创建一个坐标系统,用于绘制图形。
坐标系统是非常必要的,因为图形需要根据坐标系的网格来绘制,形状-属性是基于盒子模型的。为了使它开始,我们需要指定指定框的大小,限制框中的不规则图形,它也将用于创建绘图坐标系。坐标系统的起始点在形状框的左上角。如果没有清晰的宽和高的声明,形状*属性就不能工作。
设置自定义图形的背景颜色
应用自定义图形,其框模型仍然存在,其他传统样式设置将在框模型范围内工作,
我们只是想创建一个浮动的圆圈,并设置这个圆形背景颜色。按照正常的思维方式,效果应该是这样的:
但是当设置框的背景颜色时,您会发现所期望的效果是不同的,其效果如下:
在上面的图片中,我们看到背景颜色应用于框模型范围,而不是我们期望的圆内。
那么,我们该如何设置圆形背景色呢这导致了一个新的CSS样式:clip-path.clip-path是用来限制电流的风格范围。在下面的例子中,你将看到它是如何使用的。
提醒
现在,外部属性只作为一个域浮动元件的形状,并限制在块的应用水平的元素。用元素定义这些属性,文本将取决于图形形状的布局。未来的CSS形状不仅会限制适用于浮动的元素,我们不仅能够在文字图形做文章,但可以定义自定义的图形内部。
实例——使用外部形状在自定义形状周围创建浮动文本
让我们从一个简单的例子开始。在实例中,我们将创建一个内置文本流的自定义图形,最后的结果如下(本文的结尾提供了一个实例下载链接):
在这个例子中,我们有两个容器来设置定制的形状和嵌套的文本内容:
CSS代码将内容复制到剪贴板。
拉图尔艾菲尔
乱数假文...
首先,我们需要在浮动区域声明div节点并使用固定值来设置大小:
CSS代码将内容复制到剪贴板。
集装箱{。
溢出:隐藏;
身高:100vh;
宽度:100vw;
}
形。{
浮点数:左;
身高:100vh;
宽度:40vw;
浮:错误;
背景:黑色的URL(;
背景尺寸:封面;
}
现在坐标系统已经成功创建,然后我们将绘制图形。图形可以用两种方式绘制:
采用聚()
我们可以使用聚()计算图的范围的方法。这种方法得到多个点的坐标系中绘制图形,每个点的值(x,y)处。在这个例子中,我们将创建一个非常简单的多边形,如下图所示:
坐标点的单位可以是固定值,也可以是百分数。在这个例子中,我们以百分比形式设置点阵位置。然后我们需要将这个样式应用到浮动元素中。
CSS代码将内容复制到剪贴板。
形。{
/ / * * hellip;
形外:聚(00, 100 % 0, 100 % 100%,30%,100%);
形状:20px保证金;
}
应用上述风格后,产生了一个不规则的梯形图。
您可以看到,代码中使用了形状边距属性,用于在图形和文本内容之间设置边距。
接下来,您需要添加一个背景图,并注意到在添加背景地图之后,它将被应用到框模型中,到目前为止,结果如下:
因此,为了达到预期的效果,我们需要设置剪辑路径属性,并将其范围设置为与外部属性的形状相同。
CSS代码将内容复制到剪贴板。
形。{
/ / * * hellip;
剪辑路径:聚(00, 100 % 0, 100 % 100%,30%,100%);
}
现在,我们已经通过使用聚()方法实现目标的影响。
利用图片的链接
我们也可以通过图片(不清楚区域的图片)创建不规则图像,并根据图片的alpha通道生成不规则图像。
例如,取代的聚()声明的方法。我们可以设置形状以外的图片URI属性值,和浏览器将自动绘制不规则图形根据图片。
图片的透明部分将被声明为文本元素的浮动部分。其余部分被声明为不规则:
CSS代码将内容复制到剪贴板。
形。{
/ / * * hellip;
外部形状:URL;
形状图像阈值:0.5;此属性用于设置浮动区域透明度的范围。
}
上述两种方法各有优缺点,如图形过于复杂,用图形方法绘制节点比手工图形更方便。
tag:图形绘制不规则例子电脑软件
相关内容