用css实现一个点击展开内容的小效果（css三角形点击切换倒三角）

鹏仔工作室

已于 2023-03-15 15:10:45 修改

阅读量6.8k

点赞数 2

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

于 2019-02-01 12:06:21 首次发布

前端共享博客 http://sharedbk.com

本文链接：https://blog.csdn.net/tianpeng1996/article/details/86737945

版权

前端专栏收录该内容

105 篇文章 2 订阅

订阅专栏

CSS代码

<style type="text/css">
	.box{
		width: 280px;
		background: pink;
		margin: 30px;
		border: 2px solid black;
	}
	a{
		text-decoration: none;
		display: block;
		font-size: 12px;
		color: #fff;
		line-height: 20px;
		background: #808080;
		border-top: 1px solid black;
		border-bottom: 1px solid black;
	}
	.box_div{
		position: relative;
	}
	span{
		position: absolute;
		top: 3px;
		right: 3px;
		width: 0;
		height: 0;
		display: block;
		border-top: 6px solid #fff;
		border-bottom: 6px solid transparent;
		border-right: 6px solid transparent;
		border-left: 6px solid transparent;
	}
	p{
		height: 0px;
		overflow: hidden;
		font-size: 12px;
		color: #000;
		line-height: 20px;
	}
	.box_div:target p{
		height: 100px;
	}
	.box_div:target span{
		border-top: 6px solid transparent;
		border-bottom: 6px solid #fff;
		border-right: 6px solid transparent;
		border-left: 6px solid transparent;
	}
</style>

HTML代码


<body>
	<div class="box">
		<div class="box_div" id="box_one">
			<a href="#box_one">新闻频道</a>
			<span></span>
			<p>1.乒乓球世锦赛即将召开<br/>2.我国运动员在世锦赛中表现突出<br/>3.北京市体育运动会召开<br/>4.北京市启动空气重污染橙色预警</p>
		</div>
		<div class="box_div" id="box_two">
			<a href="#box_two">体育频道</a>
			<span></span>
			<p>1.乒乓球世锦赛即将召开<br/>2.我国运动员在世锦赛中表现突出<br/>3.北京市体育运动会召开<br/>4.北京市启动空气重污染橙色预警</p>
		</div>
		<div class="box_div" id="box_three">
			<a href="#box_three">娱乐频道</a>
			<span></span>
			<p>1.乒乓球世锦赛即将召开<br/>2.我国运动员在世锦赛中表现突出<br/>3.北京市体育运动会召开<br/>4.北京市启动空气重污染橙色预警</p>
		</div>
		<div class="box_div" id="box_fore">
			<a href="#box_fore">影视频道</a>
			<span></span>
			<p>1.乒乓球世锦赛即将召开<br/>2.我国运动员在世锦赛中表现突出<br/>3.北京市体育运动会召开<br/>4.北京市启动空气重污染橙色预警</p>
		</div>
	</div>
</body>