您现在的位置是: 首页 » 网页代码 » CSS怎么绘制三角形?
网页代码

CSS怎么绘制三角形?

网站优化小编一月 2, 2020 17人已围观

我们在平时的前端开发的时候,有时候是需要一些小图形来丰富一下页面效果,比如:下拉列表的倒三角图形。那么这样的一个三角形是如何制作出来的?下面本篇文章就来给大家介绍一下使用CSS绘制三角形的方法,希望对大家有所帮助。

网站运营中栏目排名优化技巧

在CSS中绘制三角形,可以利用css的border属性,即可实现三角形的绘制。实现三角形的原理:css盒模型。

一个盒子模型包括: margin+border+padding+content,上下左右边框交界处出呈现平滑的斜线。利用这个特点, 通过设置不同的上下左右边框宽度或者颜色可以得到小三角,小梯形等;调整宽度大小可以调节三角形形状。

.demo {
    height:20px;
    width:20px;
    border-color:#FF9600 #3366ff #12ad2a #f0eb7a;
    border-style:solid;
    border-width:20px;
}

效果图:

网站运营中栏目排名优化技巧

当把height和width都设置成0后,得到:

网站运营中栏目排名优化技巧

把其他颜色都去掉,只留下橙色后,就得到一个三角形:

网站运营中栏目排名优化技巧

完整代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>border 属性--绘制三角形</title>
		<style>
			.demo{
				height:0;
			    width:0;
			    overflow: hidden;
			    font-size: 0;
			    line-height: 0;
			    border-color:#FF9600 transparent transparent transparent;
			    border-style:solid dashed dashed dashed;
			    border-width:20px;
			}
		</style>
	</head>
	<body>
		<div class="demo"></div>
	</body>
</html>

效果图:

网站运营中栏目排名优化技巧

文章评论

    发表评论

    电子邮件地址不会被公开。

站点信息
  • 站点运行:271天
  • 网站程序:Wordpress
  • 主题模板:bvseo
  • 文章统计:4000 条
  • 文章评论:153 条
  • 微信公众号:扫描二维码,关注我们