html实现提示框箭头指向，html实现菜单展开收起

最新推荐文章于 2024-09-23 09:28:04 发布

慕云枫

最新推荐文章于 2024-09-23 09:28:04 发布

阅读量1.2k

点赞数 1

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

本文链接：https://blog.csdn.net/weixin_43992507/article/details/125017549

版权

前言

提示框箭头指向，及实现左侧菜单展开收起

效果图

在这里插入图片描述

实现

这里展开收起操作使用了jquery，引入即可查看效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			.left-box{
     
				float: left;
				width: 10%;
				height: 90vh;
				border: 1px solid #dcdcdc;
				overflow: hidden;
			}
			
			.left-content1{
     
				width: 0px;
			    height: 0px;
			    border-right: 0px solid transparent;
			    border-left: 10px solid #58a9ff;
			    border-bottom: 10px solid transparent;
			    border-top: 10px solid transparent;
			}
			.left-content2{
     
			    width: 0px;
			    height: 0px;
			    border-left: 10px solid transparent;
			    border-top: 10px solid #58a9ff;
			    border-right: 10px solid transparent;
			    border-bottom: 0px solid transparent;
			}
			.left-content3{
     
				width: 0px;
			    height: 0px;
			    border-left: 10px solid transparent;
			    border-bottom: 10px solid #58a9ff;
			    border-right: 10px solid transparent;
			    border-top: 0px solid transparent;
			}
			.left-content4{
     
				width: 0px;
			    height: 0px;
			    border-left: 0px solid transparent;
			    border-right: 10px solid #58a9ff;
			    border-bottom: 10px solid transparent;
			    border-top: 10px solid transparent;
			}
			.left-content5{
     
			    width: 0px;
			    height: 0px;
			    border-top: 10px solid #58a9ff;
			    border-left: 0px solid transparent;
			    border-right: 10px solid transparent;
			    border-bottom: 10px solid tra