当前位置:首页 > 日记 > 正文

用CSS3绘制三角形的简便方法

用CSS3绘制三角形的简便方法
本文主要介绍了CSS3绘制一个三角形的简单方法,这是CSS前端图的基础上,需要的朋友可以参考一下。

CSS边框的使用及其透明属性值实现三角形,其中最重要的是了解DIV的高度和宽度为0,边缘,填充0,所以这个箱子的大小是他的边界元由于相邻边界重叠的叠加,因此内容实际上是宽的两边边界的存在是梯形,宽度和高度为0时,div的内容,在三角形的性能边界,四边框颜色透明边框和透明,并有权设置边框的颜色为红色三角形出现,事实上这是三角形的右边界。

CSS代码将内容复制到剪贴板。

{ #三角形上
宽度:0px;
身高:0px;
边境:100px固体透明;
右:红色100px固体边界;
}
图解的

正常的框架模型,对50px div的宽度和面积的内容。黑线是高度,是它的右边框,它是梯形的。

CSS代码将内容复制到剪贴板。

{ #三角形上
宽度:50px;
身高:50px;
边境:100px固体红;
底部边框:100px固体红;
}


当div的内容宽度和高度都是0的时候。该区域的黑线是它的右边框,呈三角形。

CSS代码将内容复制到剪贴板。

{ #三角形上
宽度:0px;
身高:0px;
边境:100px固体红;
}


当div的内容宽度和高度在0上都是透明的时。左上边框,右边框为红色,三角形显示。

CSS代码将内容复制到剪贴板。

{ #三角形上
宽度:0px;
身高:0px;
边境:100px固体透明;
右:红色100px固体边界;
}


结合CSS的其他特性,以产生更有趣的结果!

相关文章

PS图象处理软件酷电影海报设计的冲

PS图象处理软件酷电影海报设计的冲

效应,图象,处理软件,海报设计,电影,本课程主要采用PS图象处理软件设计令人震撼的电影海报。当场景合成时,总是需要对素材进行大量的调整。根据我最近的经验,我想谈谈我对这些调整层的看法。 本教程使用PS图象处理软件设计电影海报的震撼效果…

AI彩色地图灰度化的四种方法

AI彩色地图灰度化的四种方法

方法,灰度,四种,彩色,地图,本教程是介绍一个朋友到ai的四种方法,把颜色变成灰度,教程是比较基础的,很适合初学者学习,推荐朋友看看。 在很多情况下,我们需要将AI的颜色贴图转换为灰度图。在这里,我们与大家分享四种将彩色地图转换为AI灰度的方法…

PS图象处理软件切断痤疮碎片穿帮照

PS图象处理软件切断痤疮碎片穿帮照

照片,碎片,图象,处理软件,电脑软件,本教程介绍了PS图象处理软件朋友的照片混杂物的粉刺,比较的基础教程,很适合初学者学习,推荐一看。 在今天的时代要求较高的图片,尤其是女性爱自己的照片,所以学会PS图象处理软件也称为PS P,照片是至关重要的,所…

轻松制作可爱字体徽标教程

轻松制作可爱字体徽标教程

教程,字体,徽标,轻松,可爱,本教程是简要介绍CDR,这是一个简单的方式来创建可爱的字体为朋友。由教程制作的字体标志非常可爱。建议你喜欢你的朋友一起学习。 本教程教朋友用CDR制作可爱的字体,这对初学者来说是很难的。 具体步骤如下: 第一步…

如何用excel打印失败的预览功能

如何用excel打印失败的预览功能

如何用,功能,电脑软件,excel,很难做一个excel窗体,想打印预览的排版,样式不能,但不能预览,功能不可用。我去打印预览没有安装打印机吗这不是坑爹。经过仔细研究,我终于找到了解决办法。下面我将与大家分享。 开放式服务 (1)按键盘上的Win + R键,打…

Word2007文本格式标记的隐藏和显示

Word2007文本格式标记的隐藏和显示

文本,设置,显示,教程,标记,隐藏或显示文本格式标记在Word2007的方式不同,以前的Office版本,让我们仔细看看它。 显示或隐藏格式标记 在启动选项卡上;段;在组中,单击显示/隐藏; 按钮不关闭所有格式标记 如果您选择始终显示特定的标记(如段落标记…

PS将风景转化为生动的手绘场景

PS将风景转化为生动的手绘场景

风景,转化为,手绘,生动,场景,本教程是介绍给一个朋友,谁使用PS转换成动画手绘场景景观。教程比较简单。建议喜欢的朋友一起学习。 我们如何使用PS来翻译我们通常拍摄到的动画场景各种做法,这里是一个简单的故事,实践很简单,具体的观点下面介绍: …

如何知道对方是否隐身QQ技能

如何知道对方是否隐身QQ技能

技能,电脑软件,QQ,QQ隐身了别人怎么看我的许多朋友都有自己的电脑,上网时间长很多朋友都厌倦了长时间聊天,习惯每天打开QQ,然后浏览下QQ空间,然后QQ隐私,去看电影或者玩游戏去了,所以经常打开QQ发现熟悉的QQ头像是灰色的看不见的多远,那么你如何知…

如何选择excel2010自动excel2010教

如何选择excel2010自动excel2010教

教程,如何选择,电脑软件,如何excel2010枢轴应用多个过滤器的行字段在Excel 2007和Excel 2010数据透视表的行字段或列字段可以自动过滤,和标签筛选(或日期过滤)和价值筛选也可以完成。至于右键单击行字段筛选下拉箭头标记,筛选菜单包含筛选和甄…

使用requirejs实现延迟加载Javascript应

使用requirejs实现延迟加载Javascript应

应用程序,延迟加载,电脑软件,requirejs,Javascript,简单的和复杂的Web应用程序由一些HTML,Javascript和CSS文件。开发商通常会增加发展的速度通过第三方的Javascript框架如jQuery、基因敲除、下划线等等。由于这些Javascript框架已经制定了具体的目的,得到了验…

PS让你设计一个免费的15草图插件,效

PS让你设计一个免费的15草图插件,效

插件,让你,草图,效率高,电脑软件,以下萧边推荐的PS为你设计草图15免费插件,设计效率高。我相信这些插件一定会让你设计得更好更快。现在让我们看一看。 虽然波希米亚编码团队一直试图更新草图的可用性,改善其功能和特性,但它仍然不能满足设计…

深入了解Javascript的范围和上下文

深入了解Javascript的范围和上下文

上下文,电脑软件,Javascript,总结 The implementation of the scope and context in Javascript is a unique feature of the Javascript language and, to some extent, the Javascript language is very flexible.The functions in Javascript can…