怎样用html写出三角形

最新推荐文章于 2024-07-24 16:53:23 发布

周百万.

最新推荐文章于 2024-07-24 16:53:23 发布

阅读量5.4k

点赞数 2

分类专栏： html 编程 CSS 文章标签： html css 前端

本文链接：https://blog.csdn.net/m0_45142186/article/details/123202983

版权

html 同时被 3 个专栏收录

37 篇文章 20 订阅

订阅专栏

编程

19 篇文章 1 订阅

订阅专栏

CSS

16 篇文章 0 订阅

订阅专栏

1、先写一个盒子

2、让宽度和高度为0

3、给出一个border值，border：10px solid transparent ;

4、想要那个方向的三角形，就给出哪个方向的颜色

如图所示：border-top-coloor:blue;上面的三角形就是蓝色！

border-left-coloor:red;上面的三角形就是红色！

......

注意：如图所示正方形的边长为20px 但是所写的border 值为10px 根据此来做出想要的三角形即可！

代码如下：

<style>
		.box {
			width: 0;
			height: 0;
			border:100px solid transparent;
			border-left-color: red;
			border-right-color: green;
			border-top-color: blue;
			border-bottom-color: yellow;
		}
	</style>
</head>
<body>
	<div class="box"></div>	
	
</body>

周百万.

关注

2
点赞
踩
9

收藏

觉得还不错? 一键收藏
打赏
0
评论
怎样用html写出三角形

1、先写一个盒子2、让宽度和高度为03、给出一个border值，border：10px solid transparent ;4、想要那个方向的三角形，就给出哪个方向的颜色如图所示：border-top-coloor:blue;上面的三角形就是蓝色！border-left-coloor:red;上面的三角形就是红色！......注意：如图所示正方形的边长为20px 但是所写的border 值为10px 根据此来做出想要的三角形即可！代码如下：<st
复制链接

扫一扫