带箭头的对话框

最新推荐文章于 2024-05-02 17:33:55 发布

原创最新推荐文章于 2024-05-02 17:33:55 发布 · 349 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #css3

css 专栏收录该内容

8 篇文章

订阅专栏

本文详细解析了如何使用CSS和伪元素创造出一个动态的气泡框效果，适合前端开发者了解并应用于实际项目中。

<div id="app">气泡框</div>

#app {
  position: relative;
  width: 150px;
  line-height: 50px;
  margin: 50px auto;
  border: 2px solid #39f;
  border-radius: 10px;
  text-align: center;
}
#app::before {
  position: absolute;
  right: 100%;
  top: 50%;
  content: " ";
  transform: translateY(-10px);
  border: 10px solid transparent;
  border-right-color: #39f;
}

#app::after {
  position: absolute;
  right: 100%;
  top: 50%;
  content: " ";
  transform: translateY(-7px);
  border: 7px solid transparent;
  border-right-color: #fff;
}