聊天布局有问题

Question

我正在尝试在我正在处理的网站上复制聊天布局。我能够创建聊天气泡并将内容放在正确的位置，我只是无法按照我想要的方式获取它。只有一些我遇到麻烦的小事。我无法弄清楚如何让泡泡边缘的三角形与泡沫的其余部分一样薄，并使其变得越来越小。我将图像中的符号定位稍微低一些，就像我需要它的图像一样。最后，＃34;登录评论＆＃34;需要在图像的左边一点点。如果有人能够对这些事情有所了解，那将非常感激！

目前：

我想要实现的目标：

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

HTML：

<img src="{{ .picture }}">
<p>Hello, {{ .nickname }}</p>

CSS：

  <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>

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/

Answer 2

检查出来：

.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:25px; /* controls vertical position */
  bottom:auto;
  left:auto;
  right:-15px; /* value = - border-left-width - border-right-width */
  border-width:5px 0 5px 15px;
  border-color:transparent #3A7DBA;
}

/* creates the smaller  triangle */
.triangle-border.right:after {
  top: 27px;
  bottom: auto;
  left: auto;
  right: -13px;
  border-width: 3px 0 3px 13px;
  border-color: transparent #ccf;
}

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

<div class="sign-in">
  <div class="cell one">
    <p class="triangle-border right blue">Join the Conversation</p>
  </div>
</div>