相关疑难解决方法(0)

带有箭头的语音泡沫

我有一个项目,我需要插入语音泡沫/消息框.我试图实现的一般形状是这样的:

带箭头或三角形的CSS语音泡沫

.bubble {
  height: 100px;
  width: 200px;
  border: 3px solid gray;
  background: lightgray;
  position: relative;
  cursor:pointer;
}
.triangle {
  width: 0;
  border-top: 20px solid black;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  cursor:pointer;
}
Run Code Online (Sandbox Code Playgroud)
<div class="bubble">Speech bubble
</div>
<div class="triangle">
</div>
Run Code Online (Sandbox Code Playgroud)

这当前没有通过命中测试,因为透明边框也是可点击的.

目标

  • 命中框(可点击/可挖掘区域)需要坚持形状的边界(此处的透明边框也可以悬空,使此无效).

  • 我需要在各种内容(图像,等级,文本......)上显示形状,

问题

操作这个形状时我遇到的主要问题是:

  • 能够根据所引用元素的位置(顶部/左侧/右侧/底部)在讲话泡泡周围移动三角形
  • 在需要强调时在其周围添加边框或框阴影

无论如何解决这些问题?

css css3 css-shapes

34
推荐指数
2
解决办法
1万
查看次数

标签 统计

css ×1

css-shapes ×1

css3 ×1