Question

我的代码部分重叠，但我无法弄清楚如何。我尝试过更改边框，插入填充，空格，调整宽度，检查代码，删除绝对位置等等都没有奏效。语音泡泡不需要互动，但我需要它们保持相同的宽度，但不同的高度。我也需要在它们之间留一个小的差距，但目前还没有差距。

<!DOCTYPE html>
<!-- Author: Lorna Costelloe -->
<html>
    <head>
    <meta charset = "utf-8">
    <title>Speech Bubble</title>
    <style media="screen" type="text/css">
        .speech-bubble{
            background-color: #f4911c;
            border: 3px solid #662f8c;
            border-radius: 5px;
            width: 500px;
            text-align: center;
            padding: 20px;
            position: absolute;}
        .speech-bubble .arrow {
            border-style: dotted;
            position: absolute;}
         .bottom {
            border-color: #662f8c transparent transparent transparent;
            border-width: 8px 8px 0px 8px;
            bottom: -8px;}
        .bottom:after {
            border-color: #f4911c transparent transparent transparent;
            border-style: dotted;
            border-width: 7px 7px 0px 7px;
            bottom: 1px;
            content: "";
            position: absolute;
            left: -7px;}
    </style>
</head>
<body>
    <!--copy and paste this for a new speech bubble. 
    <div class="speech-bubble">
        <div class="arrow bottom right">
        </div>
         CONTENT HERE. 
    </div>-->
    <div class="speech-bubble">
        <div class="arrow bottom right"></div>
        TESt test test test test test test tes test TESt test test test      test test test tes testTESt test test test test test test tes test<br><br>
        TESt test test test test test test tes testTESt test test test test test test tes testTESt test test test test test test tes test<br><br>
        TESt test test test test test test tes test TESt test test test test test test tes testTESt test test test test test test tes test<br><br>
        TESt test test test test test test tes testTESt test test test test test test tes testTESt test test test test test test tes test<br><br>
        TESt test test test test test test tes test TESt test test test test test test tes testTESt test test test test test test tes test<br><br>
        TESt test test test test test test tes testTESt test test test test test test tes testTESt test test test test test test tes test<br><br>
        TESt test test test test test test tes test TESt test test test test test test tes testTESt test test test test test test tes test<br><br>
        TESt test test test test test test tes testTESt test test test test test test tes testTESt test test test test test test tes test<br><br>
    </div>
    <br><br>
    <div class="speech-bubble">
        <div class="arrow bottom right">
        </div>
         second test second test second test second test second test second test second test second test second test second test <br><br>
         second test second test second test second test second test second test second test second test second test second test <br><br>
         second test second test second test second test second test second test second test second test second test second test <br><br>
         second test second test second test second test second test second test second test second test second test second test <br><br>
         second test second test second test second test second test second test second test second test second test second test <br><br>
         second test second test second test second test second test second test second test second test second test second test <br><br>
        second test second test second test second test second test second test second test second test second test second test <br><br>
    </div>
</body>

Answer 1

简化！

更新 - 现在使用紫色箭头边框：）

Have a fiddle!

HTML

<div class="speech-bubble"></div>

CSS

 .speech-bubble {
      background-color: #f4911c;
      border: 3px solid #662f8c;
      border-radius: 5px;
      width: 500px;
      text-align: center;
      padding: 20px;
      position: relative;
      margin: 0 0 40px;
  }
  .speech-bubble:before {
      border-color: #662f8c transparent transparent transparent;
      border-width: 8px 8px 0px 8px;
      border-style: dotted;
      position: absolute;
      left: 9px;
      bottom: -8px;
      content:'';
  }
  .speech-bubble:after {
      border-color: #f4911c transparent;
      border-style: dotted;
      border-width: 7px 7px 0px;
      bottom: -7px;
      content:'';
      position: absolute;
      left: 10px;
  }

Answer 2

请尝试以下操作： LINK

<强> CSS：

  .speech-bubble {
      background-color: #f4911c;
      border: 3px solid #662f8c;
      border-radius: 5px;
      width: 500px;
      text-align: center;
      padding: 20px;
      position: relative;
  }

语音泡沫代码

2 个答案: