css中小三角是怎样产生的呢？（49）

㼛思雨

于 2020-06-18 21:49:33 发布

阅读量179

点赞数 1

分类专栏： css3基础100问文章标签： html5 css3

本文链接：https://blog.csdn.net/weixin_45147894/article/details/106843502

版权

css3基础100问专栏收录该内容

100 篇文章 8 订阅

订阅专栏

京东页面一个导航栏中的一个标题上一点击上面有个小三角，是怎么产生的？

咱们不给盒子高和宽，只给它边框有宽度，颜色不同，看一下会出现什么效果呢？

那么灵感不就来了，只要我们把其他三个三角给设置成透明不就行了！剩下一个三角，三角不久设置成了！

那有意思的来了。我们可以直接设置边框为透明，然后利用层叠性再设置一个边框不就行了，三角就出来了呀！


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div {
			position: relative;
			width: 200px;
			height: 100px;
			background-color: pink;
			margin: 100px auto;
		}
		p {
			position: absolute;
			top: -40px;
			left: 50%;
			margin-left: -20px;
			width: 0;
			height: 0;
			border-style: solid;
			border-width: 20px;
			border-color: transparent transparent pink transparent;
			font-size: 0;
			line-height: 0;
		}
	</style>
</head>
<body>
	<div>
		<p></p>
	</div>
</body>
</html>