javascript - 聊天布局问题

Question

我正在尝试在我正在使用的网站上复制聊天布局。我能够创建聊天气泡并将内容放在几乎正确的位置，但我无法完全按照我想要的方式获得它。只有几件小事我遇到了麻烦。我不知道如何让气泡边界一侧的三 Angular 形与气泡的其余部分一样薄，以及如何使其越来越小。我在将登录图像定位得比我需要的图像低一点时遇到了麻烦。最后，“登录评论”需要在图片左侧一点。如果有人能阐明这些事情中的任何一个，我们将不胜感激!

目前:

我要实现的目标:

如你所见，我非常接近!只是一些小事给我带来了麻烦。

HTML:

  <div class="sign-in">
    <div class="cell one">
      <p class="triangle-border right blue">Join the Conversation</p>
    </div>
    <div class="cell two">
      <a href="#"><img class="sign-in-img" src="<?php bloginfo('stylesheet_directory'); ?>/images/sign-in.png" /></a>
    </div>
  </div>
  <span class="si">Sign In to Comment</span>

CSS:

.triangle-border {
  position:relative;
  padding:15px;
  margin:1em 0 .5em;
  border:1px solid #5a8f00;
  color:#333;
  background:#fff;
  /* css3 */
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
  min-width: 90%;
  max-width: 90%;
  background-color: #E0F6F2;
}

.triangle-border.blue {
  background-color: #CDE5F7;
  border:1px solid #3A7DBA;
}

.triangle-border.right {
  margin-right:30px;
}

.triangle-border:before {
  content:"";
  position:absolute;
  bottom:-20px; /* value = - border-top-width - border-bottom-width */
  left:40px; /* controls horizontal position */
  border-width:20px 20px 0;
  border-style:solid;
  border-color:#5a8f00 transparent;
  /* reduce the damage in FF3.0 */
  display:block;
  width:0;
}

/* creates the smaller  triangle */
.triangle-border:after {
  content:"";
  position:absolute;
  bottom:-13px; /* value = - border-top-width - border-bottom-width */
  left:47px; /* value = (:before left) + (:before border-left) - (:after border-left) */
  border-width:13px 13px 0;
  border-style:solid;
  border-color:#fff transparent;
  /* reduce the damage in FF3.0 */
  display:block;
  width:0;
}

/* creates the larger triangle */
.triangle-border.right:before {
  top:10px; /* controls vertical position */
  bottom:auto;
  left:auto;
  right:-30px; /* value = - border-left-width - border-right-width */
  border-width:15px 0 15px 30px;
  border-color:transparent #3A7DBA;
}

/* creates the smaller  triangle */
.triangle-border.right:after {
  top:16px; /* value = (:before top) + (:before border-top) - (:after border-top) */
  bottom:auto;
  left:auto;
  right:-21px; /* value = - border-left-width - border-right-width */
  border-width:9px 0 9px 21px;
  border-color:transparent #fff;
}

.pagecontent .cols .col.two .sign-in {
  table-layout: fixed;
  display: table; 
  outline: none;
}

.pagecontent .cols .col.two .sign-in .cell {
  display: table-cell;
  margin: 5px;
  height: 100%;
}

.pagecontent .cols .col.two .sign-in .cell.one {
  width: 85%;
}

.pagecontent .cols .col.two .sign-in .cell.two {
  padding-left: 2%;
  width: 15%;
}

.pagecontent span.si {
  font-size: .8em;
  color: #808C8D;
}

Answer 1

这是一种方法:

<div class="wrapper">
    <p class="talk-bubble">
    talk bubble talk bubble talk bubble talk bubble talk bubble talk bubble talk bubble talk bubble talk bubble talk bubble talk bubble talk bubble talk bubble talk bubble
  </p>
  <p class="sign-in">
    Sign In to Comment
  </p>
  <img src="your/image.png" />
</div>

CSS:

div.wrapper {
  position: relative;
  padding-bottom: 0px;
  background-color: #ffffff;
  z-index: -2;
}

div.wrapper img {
  position: absolute;
  bottom: 0;
  right: 0;
  border: 1px solid black;
  width: 40px;
  height: 40px;
}

.sign-in {
  text-align: right;
  margin: 0;
  margin-right: 50px;
  padding: 0;
}

p.talk-bubble {
  border: 1px solid #3A7DBA;
  padding: 15px;
  background-color: #CDE5F7;
  position: relative;
  margin-right: 60px;
}

p.talk-bubble:before,
p.talk-bubble:after {
  box-sizing: border-box;
  padding: 0;
  content: '';
  width: 20px;
  height: 20px;
  display: block;
  position: absolute;
  border: 20px solid transparent;
}

p.talk-bubble:before {
  z-index: -1;
  border-bottom: 20px solid #3A7DBA;
  right: -12px;
  bottom: -1px;
}

p.talk-bubble:after {
  border-bottom: 20px solid #CDE5F7;
  right: -10px;
  bottom: 0px;
}

https://jsfiddle.net/mcgraphix/zLx5967t/