如何使用css实现下图圈出的效果[关闭]

Posted

技术标签:

【中文标题】如何使用css实现下图圈出的效果[关闭]【英文标题】:How to use css to achieve the effect circled in the picture below [closed] 【发布时间】:2020-06-16 17:07:15 【问题描述】:

想知道能不能用css实现图中圈出来的白线。

如果是这样,你能告诉我这个想法吗,谢谢。

【问题讨论】:

【参考方案1】:

使用这个

.tooltip 
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;


.tooltip .tooltiptext 
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 150%;
  left: 50%;
  margin-left: -60px;


.tooltip .tooltiptext::after 
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: black transparent transparent transparent;


.tooltip:hover .tooltiptext 
  visibility: visible;
<h2>Top Tooltip w/ Bottom Arrow</h2>

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>

.tooltip .tooltiptext::after 是添加此箭头的属性,您可以随意玩耍并更改其位置

【讨论】:

以上是关于如何使用css实现下图圈出的效果[关闭]的主要内容,如果未能解决你的问题,请参考以下文章

休眠圈出的实体[重复]

如何使用 css 和 js/jQuery 创建 div 漂浮在图像上的效果? [关闭]

如何在vue中全局引入stylus文件的公共变量

如何添加 CSS 过渡以在自定义模式窗口上创建打开/关闭效果

如用css如何实现下图的布局

如何实现SAP UI5 Web Component React控件的加载效果