css border 画三角形

最新推荐文章于 2023-03-18 16:02:09 发布

noonnightstorm

最新推荐文章于 2023-03-18 16:02:09 发布

阅读量3k

点赞数 2

本文链接：https://blog.csdn.net/noonnightstorm/article/details/8487577

版权

前几日在浏览网站中无意发觉了人家用CSS来画三角形，我觉得很有趣但不太会所以就问了一下师姐，发觉自己很无知，呵呵，原来很多人都是用这种方法画三角形的，为什么的，原因如下:

（1）一张小三角形的图片可能有几百字节，不过几百字节可以写多少行代码呢？

（2）图片太多会导致网页加载得会很慢

先看代码吧：

HTML：

<!DOCTYPE HTML>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>test</title>
  <link rel="stylesheet" href="../css/text.css">
</head>
<body>
  <div class="box box-1"></div>
  <div class="box box-2"></div>
</body>
</html>

CSS：

*{
	margin: 0;
	padding: 0;
}
.box{
	float: left;
	height: 0;
	width: 0;
	margin: 100px auto auto 150px;
	border-width: 50px;
	border-style: solid;
}
.box-1{
	border-width: 50px;
	border-style: solid;
	border-color: #15ff0f #fcff12 #192fff #fc19ff;
}
.box-2{
	border-color: #15ff0f transparent transparent transparent;
}

原理：

（1）先设置witdh=0,height=0,那么div里面就不会显示任何东西

（2）利用border-width来画一个正方形，这个正方形是由4个三角形组成的

（3）把不需要的另外三边设置为透明就可以了

效果图：

noonnightstorm

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css border 画三角形

前几日在浏览网站中无意发觉了人家用CSS来画三角形，我觉得很有趣但不太会所以就问了一下师姐，发觉自己很无知，呵呵，原来很多人都是用这种方法画三角形的，为什么的，原因如下: （1）一张小三角形的图片可能有几百字节，不过几百字节可以写多少行代码呢？（2）图片太多会导致网页加载得会很慢先看代码吧：HTML： test
复制链接

扫一扫