带三角箭头的悬浮提示

最新推荐文章于 2023-06-13 22:28:24 发布

熙哥_tito

最新推荐文章于 2023-06-13 22:28:24 发布

阅读量180

点赞数

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

本BLOG上原创文章未经本人许可，不得用于商业用途。转载请注明出处，否则保留追究法律责任的权利。

本文链接：https://blog.csdn.net/weixin_49471755/article/details/131005352

版权

css 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

画一个三角形：容器宽高为0；其中一条border 有颜色、实线、宽度；其余三条border 宽度、实线、transparent。

        .shape {
           width: 0;
           height: 0;
           border-left: 50px solid blue;
           border-right: 50px solid transparent;
           border-top: 50px solid transparent;
           border-bottom: 50px solid transparent ;
           background: white;
         }

<!DOCTYPE html>
<html>

<head>
	<style type="text/css">
		body {
			text-align: center;
		}

		.tooltip {
			position: relative;
			color: black;
			display: inline-block;
		}

		.tooltiptext {
			visibility: hidden;
			width: 150px;
			color: white;
			background-color: black;
			position: absolute;
			border-radius: 4px;
			padding: 5px;
			top: 150%;
			left: 50%;
			margin-left: -75px;
			z-index: 1;
		}

		.tooltip:hover .tooltiptext {
			visibility: visible;
		}

		.tooltiptext::after {
			content: " ";
			position: absolute;
			bottom: 100%;
			/* At the top of the tooltip */
			right: 50%;
			margin-left: -5px;
			border-width: 5px;
			border-style: solid;
			border-color: transparent transparent black transparent;
			/* 调换border-color中的颜色来查看箭头的位置，再结合position 来放置箭头在边框的位置 */
		}

		.main {
			margin: 60px auto;
			width: fit-content;
		}
		.shape {
			width: 0;
			height: 0;
			border-left: 50px solid blue;
			border-right: 50px solid ;
			border-top: 50px solid transparent;
			border-bottom: 50px solid ;
			background: white;
		}
	</style>
	<meta charset="utf-8">
	<title></title>
</head>

<body>
	<div class="tooltip">
		鼠标移到我身上
		<span class="tooltiptext">哈哈,这个是一个提示</span>
	</div>

	<div class="main">
		<div class="shape"></div>
	</div>
	
</body>

</html>