首页 > 开发 > CSS > 正文

利用CSS伪元素创建带三角形的提示框的实现方法

2024-07-11 08:32:36

字体：大中小

来源：转载

供稿：网友

CSS伪元素非常有用，它提供了一种无需多余的DOM元素来实现一些常见的功能的方法，以下利用其实现一个带三角形的tooltip。

下面是DOM结构：
下面是对应的CSS样式：

XML/HTML Code复制内容到剪贴板

<div class="tooltip-wrapper bottom"> <div class="arrow"></div>
<div class="content"> This is content
</div> </div>

CSS Code复制内容到剪贴板

.tooltip-wrapper { position: absolute;
z-index: 9999; padding: 5px;
background: white; border: 1px solid #7d7d7d;
border-radius: 5px; }
.tooltip-wrapper .arrow, .tooltip-wrapper .arrow:after {
position: absolute; display: block;
width: 0; height: 0;
border-color: transparent; border-style: solid;
} .tooltip-wrapper .arrow {
border-width: 11px; }
.tooltip-wrapper .arrow:after { content: "";
border-width: 10px; }
.tooltip-wrapper.bottombottom .arrow { top: -11px;
left: 50%; margin-left: -11px;
border-top-width: 0; border-bottom-color: #7d7d7d;

上一篇：CSS样式覆盖规则全面了解

下一篇：select元素中设置padding效果的方法

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注

新闻热点

最牛同桌！我考了696分我同桌考了703分

2024-06-26 22:28:41

650分！高二女生考入北大：遗憾不能上高三

2024-06-26 22:26:16

男生估分600只考了397 妈妈：高考虽重要，但不代表所有

2024-06-26 22:23:01

唐尚珺回应是否会直播带货：有人出100万想和他合作！

2024-06-25 19:29:23

名校抢人名场面：清华、北大太拼了！

2024-06-25 19:22:14

男生高考语文满分！网友：第一次听说

2024-06-25 19:19:15

疑难解答

图片精选

网友关注