纯css绘制三角形

最新推荐文章于 2024-06-17 17:43:20 发布

weixin_45836228

最新推荐文章于 2024-06-17 17:43:20 发布

阅读量569

点赞数

文章标签： css css3 前端

本文链接：https://blog.csdn.net/weixin_45836228/article/details/121710455

版权

纯css绘制三角形

实现原理

将一个正方形通过对角切割的方式拆分为4个三角形，将其中三个的颜色设置为：transparent。设置为transparent的三角形将不会显示，仅显示一个唯一一个有颜色的三角形。

index.html

<html long = "en">
<head>
	<meta charste = "UTF-8">
	<title>纯css绘制三角形</title>
	<link rel = 'stylesheet' type = "text/css" href="index.css">
</hand>
<body>
	<div class ="div1"></div>
	<div class ="div2"></div>
</body>
</html>

index.css

实现纯css绘制三角形的 index.css。

div1{
	width : 0;
	height : 0;
	background - color : #64c4ed;
	border - top :250px solid #f6d365;
	border - left :250px solid transparent;
	border - bottom :250px solid transparent;
	border - right :250px solid transparent;
	margin : 40px auto;
}

简化css代码

div1{
	width : 0;
	height : 0;
	border : 250px solid transparent:
	border - top - color : #f6d365;
	margin : 40px auto;
}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_45836228

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
纯css绘制三角形

纯css绘制三角形实现原理将一个正方形通过对角切割的方式拆分为4个三角形，将其中三个的颜色设置为：transparent。设置为transparent的三角形将不会显示，仅显示一个唯一一个有颜色的三角形。index.html<html long = "en"><head> <meta charste = "UTF-8"> <title>纯css绘制三角形</title> <link rel = 'stylesheet' typ
复制链接

扫一扫