下拉菜单或者左侧右侧三角的设置方法

最新推荐文章于 2023-03-07 14:09:51 发布

夜夜夜璟归

最新推荐文章于 2023-03-07 14:09:51 发布

阅读量947

点赞数 1

文章标签： html5 css3

本文链接：https://blog.csdn.net/m0_72313625/article/details/125841709

版权

1.通过边框书写三角形：

html部分：主要是设置两个盒子。

<body>
		<div class="one"></div>
		<div class="two"></div>
</body>

css部分：

.one{
	width: 0;
	height: 0;
	border-top:100px solid transparent;
	border-bottom: 100px solid transparent;
	border-left: 100px solid blue;
	border-right: 100px solid green;
}
.two{
	width: 0;
	height: 0;
	border: 100px solid transparent;
	border-bottom: 100px solid red;
}

css代码解析：

.one里面的样式给宽高为0，主要是让内容区为0；使方框只剩下边框，然后给边框添加厚度，其中给上下100px边框的厚度，但是方框的颜色为透明色，左右给100px边框厚度，颜色为蓝色和绿色。

.one的实现效果如下：

.two则是同时给四个方向边框厚度，然后给他透明色，，然后根据需要，给需要加的方向添加边框厚度和颜色就可以实现三角效果。

.two的实现效果如下：

2.透过旋转盒子，实现三角的效果（这种设置方式就可以给边框添加颜色）：

html代码块部分：

<body>
		<div class="one"></div>
		<div class="two"></div>
</body>

css部分：

<style>
	.one{
		position: relative;
		width: 150px;
		height: 30px;
		color: white;
		border: 1px solid #47852b;
		background-color: #67A54B;
		border-radius: 5px 0 0 5px;
	}
	.two{
		position: absolute;
		left: 149px;
		top: 13px;
		width: 21px;
		height: 21px;
		background-color: #67A54B;
		transform: rotate(135deg);
		border-top: 1px solid red;
		border-left: 1px solid #47852b;
	}
</style>

css代码块解析：

.one里面主要是给它一个宽高和背景色（其中的color是给里面字体的颜色）给它一个像素的边框，。border-radius是给他的边框一个圆角效果，其中给的数值是左上和左下各五个像素的边框圆角效果。

.one的效果图：