css3实现三角形、等腰梯形

最新推荐文章于 2023-07-17 11:05:35 发布

hst❀

最新推荐文章于 2023-07-17 11:05:35 发布

阅读量598

点赞数 1

分类专栏： CSS

本文链接：https://blog.csdn.net/HuangsTing/article/details/99306092

版权

CSS 专栏收录该内容

24 篇文章 2 订阅

订阅专栏

三角形

<div class="box"></div>

.box {
	width:0px;
	height:0px;

	border-top:50px solid rgba(0,0,0,0);
	border-right:50px solid  rgba(0,0,0,0);
	border-bottom:50px solid green;
	border-left:50px solid  rgba(0,0,0,0);
}

等腰梯形

<div class='box'></div>
<div class='box2'></div>
<div class='box3'></div>

.box,.box3 {
	display:inline-block;
	width:0px;
	height:0px;

	border-top:50px solid rgba(0,0,0,0);
	border-right:50px solid  rgba(0,0,0,0);
    border-bottom:50px solid green;
    border-left:50px solid  rgba(0,0,0,0);
}

.box2 {
	display:inline-block;
	width:50px;
	height:50px;
	background-color:green;
}

 .box{
	transform: translate(54px,10px);
}
.box3{
	transform: translate(-54px,10px);
}