相关疑难解决方法(0)

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

.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;
}

<div class="bubble">Speech bubble
</div>
<div class="triangle">
</div>

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

目标

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

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

问题

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

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

无论如何解决这些问题？

我想用css创建一个向上和向下的箭头,如下所示:http://apps.eky.hk/css-triangle-generator/

然而,我想要设置它,而不是纯色,所以内部是白色的,三角形周围只有一个边框.(因此三角形将是多色的,内部一种颜色和不同颜色的边框).

这是可能的,如果是的话,怎么办呢？

我刚刚遇到CSS Arrow请帮我创建CSS三角形.但是,这还不够.它只创建一个外部箭头,而我也想创建内部三角形.

以上就是在Photoshop中创建的.我能够使用CSS Arrow Please创建第一个能够,然后硬(呃)部分出现.如何创建包含外部(右对齐)和内部(左对齐)箭头的块,其中最后一个箭头仅包含内部(左对齐)箭头.

结果应该是a可点击的过程链.

要创建第一个,这是CSS

.arrow_box:first-child {
    position: relative;
    background: #1abc9c;
    border: 5px solid #16a085;
}

.arrow_box:first-child:after, .arrow_box:first-child:before {
    left: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.arrow_box:first-child:after {
    border-color: rgba(26, 188, 156, 0);
    border-left-color: #1abc9c;
    border-width: 16px;
    margin-top: -16px;
}
.arrow_box:first-child:before {
    border-color: rgba(22, 160, 133, 0);
    border-left-color: #16a085;
    border-width: 23px;
    margin-top: -23px;
}

但随后我的问题出现了:我将如何创建另外两个？

谢谢!

我有一个 div，我希望它看起来像一个带有框阴影的语音气泡。目前它看起来像这样：

问题是我不知道如何将阴影添加到伪元素“尾巴”。这甚至可能吗？如果我将 box-shadow 添加到伪元素，它看起来像这样，这肯定不是我想要的：

我真的很感激这方面的任何指导。谢谢

JS小提琴

代码：

#container {
  height: 500px;
  background-color: #Febb68;
  padding: 30px;
}
#bubble {
  height: 200px;
  width: 200px;
  padding: 50px 60px 0;
  position: relative;
  z-index: 10;
  border-radius: 30px 0;
  background: rgba(255, 255, 255, .85);
  box-shadow: 0 0 10px 1px #944;
  margin-bottom: 55px;
}
#bubble:after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 0;
  height: 0;
  border-top: 85px solid rgba(255, 255, 255, 0.85);
  border-right: 85px solid transparent;
  border-left: 0px solid transparent;
}

<div id='container'> …

我想用底部箭头创建一个评论框.但我不知道如何添加此箭头.这是我想要创建的模型.

到目前为止这是我的代码.

.arrow-div {
    position: relative;
    background: #424242;
    margin: 2em auto;
    color:#eaeaea;
    border-radius:3px;
    height: 2.5em;
    text-align:center;
    width:270px;
 }

<div class="arrow-div">
$167 still needed for this project
</div>