CSS 三角形

最新推荐文章于 2023-08-21 14:47:29 发布

qq_40178497

最新推荐文章于 2023-08-21 14:47:29 发布

阅读量63

点赞数

分类专栏：前端文章标签： css3 html

本文链接：https://blog.csdn.net/qq_40178497/article/details/119866807

版权

前端专栏收录该内容

45 篇文章 1 订阅

订阅专栏

利用div的border绘制三角形
先给出html

<body>
    <div id="sanjiao1"></div>
    <hr>
    <div id="sanjiao2"></div>
    <hr>
    <div id="sanjiao3"></div>
    <hr>
    <div id="sanjiao4"></div>
    <hr>
    <div id="sanjiao5"></div>
    <hr>
    <div id="sanjiao6"></div>
    <hr>
    <div id="sanjiao7">三角七</div>
    <hr>
    <div id="sanjiao8">三角八</div>
    <hr>
    <div id="sanjiao9"></div>
</body>

样式

	#sanjiao1{
		width: 0;
		height: 0;
		border-left: 50px solid rebeccapurple;
		border-right: 50px solid greenyellow;
		border-bottom: 50px solid red;
		border-top: 50px solid green;
	}

sanjiao1
四个边框均不同，拿到其中一个三角

	#sanjiao2{
		width: 0;
		height: 0;
		border-left: 50px solid rebeccapurple;
		border-right: 50px solid greenyellow;
		border-bottom: 100px solid red;
		/* border-top: 50px solid green; */
	}

去掉上边框，下边框是左右边框的两倍

	#sanjiao3{
		width: 0;
		height: 0;
		border-left: 50px solid transparent;
		border-right: 50px solid transparent;
		border-bottom: 100px solid red;
		/* border-top: 50px solid green; */
	}

左右透明得三角形

其他样式三角：

	#sanjiao4{
		width: 0;
		height: 0;
		border-left: 100px solid red;
		border-right: 50px solid transparent;
		border-bottom: 50px solid transparent;
		border-top: 50px solid transparent;
	}

	#sanjiao5{
		width: 0;
		height: 0;
		border-left: 50px solid red;
		border-right: 50px solid transparent;
		border-bottom: 50px solid transparent;
		border-top: 50px solid red;
	}

	#sanjiao6{
		width: 0;
		height: 0;
		border-left: 50px solid transparent;
		border-right: 50px solid red;
		border-bottom: 50px solid red;
		border-top: 50px solid transparent;
	}

根据第一个图，调整边框大小和是否transparent透明来得到不同的三角形
简单点可以先设置所有边框transparent，再单独设置一个变

#sanjiao9 {
	width: 0;
	height: 0;
	border: 50px solid transparent;
	border-top: 100px solid red;
}

利用伪类实现三角形：

#sanjiao7:after {
	width: 0;
	height: 0;
	border: 10px solid transparent;
	border-left-color: red;
	position: absolute;
	content: "";
}

利用伪类实现

#sanjiao8{
	position: relative;
}
#sanjiao8:after, #sanjiao8::before {
	width: 0;
	height: 0;
	border: 10px solid transparent;
	border-left-color: white;
	position: absolute;
	content: "";
}
#sanjiao8:before {
	top: 0;
	left: 50px;  /* 视具体内容而定 */
	border-left-color: red;
}

利用before伪类往右超出一点实现

参考链接：http://jiazq.xyz/view/115

qq_40178497

关注

0
点赞
踩
0

收藏

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

利用div的border绘制三角形先给出html<body> <div id="sanjiao1"></div> <hr> <div id="sanjiao2"></div> <hr> <div id="sanjiao3"></div> <hr> <div id="sanjiao4"></div>
复制链接

扫一扫