您现在的位置是:php教程网 > 编程技术 >

[db:作者] 2019-09-10 00:29 PHP学习

CSS怎么绘制三角形?

我们在平时的前端开发的时候,有时候是需要一些小图形来丰富一下页面效果,比如:下拉列表的倒三角图形。那么这样的一个三角形是如何制作出来的?下面本篇文章就来给大家介绍一下使用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;
}

效果图:

7a96fc4f9d1ad72a68bbbce5fcae85b.png

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

786fd65a3ff1a542b680f7ab2de0cf7.png

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

b1be8c7b767a8e4a255133ad4322c5c.png

完整代码:

<!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>

效果图:

b1be8c7b767a8e4a255133ad4322c5c.png

以上就是CSS怎么绘制三角形?的详细内容,更多请关注html中文网其它相关文章!

上一篇:上一篇:javascript如何定义类?

下一篇:下一篇:javascript如何判断值是否是数字?