使用CSS的語音氣泡-有解無憂

由于我不是 CSS 專家，所以請求大家幫助。我正在嘗試創建如下所示的語音氣泡。但我只能得到橢圓形。我不知道如何在右上角添加尾巴。

我已經完成了所有SO 解決方案，但不知道需要更改哪個 CSS 屬性才能按照下圖制作右上角的尾巴。

使用 CSS 的語音氣泡

html

<div class="bubble-wrapper">
  <div class="flat-oval"></div>
</div>

CSS

 .flat-oval {
  border: 1px solid green;
  width: 160px;
  height: 80px;
  background-color: green;
  border-radius: 50%;
  
  position: relative;
  left: 0%
}

.bubble-wrapper{
  border: 1px solid red;
  text-align: center;
}

那條尾巴應該又長又瘦。

謝謝大家

uj5u.com熱心網友回復：

像下面這樣做：

.speech {
  width: 200px;
  height: 100px;
  border-radius: 100%;
  background: red;
  margin: 50px;
  position: relative;
  filter:drop-shadow(0 0 1px #000) drop-shadow(0 0 0 #000) drop-shadow(0 0 0 #000) drop-shadow(0 0 0 #000)
}

.speech:before {
  content: "";
  position: absolute;
  top: -15%;
  left: -10%;
  border-radius: 100px 100px 0 0;
  width: 60px;
  height: 30px;
  box-shadow: 20px 0 0 red;
}

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

uj5u.com熱心網友回復：

我希望它對你有用..

.bubble-wrapper {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-70%, -50%);
      width: 80vmin;
      height: 80vmin;
  }


  .bubble-wrapper div {
      position: absolute;
      box-sizing: border-box;
  }

  .b {
      border: 0.5vmin solid black;
  }

  .r {
      border-radius: 100%;
  }

  .hb::before,
  .ha::after {
      content: "";
      display: block;
      position: absolute;
  }

  .bubble {
      width: 40%;
      height: 25%;
      left: 73%;
      top: 10%;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      font-size: 5vmin;
      background: #ffd;
      box-shadow: 0 -0.25vmin, 0 0.125vmin;
      font-family: "Comic Sans", "Comic Neue", sans-serif;
  }

  .bubble::before {
      width: 40%;
      height: 250px;
      bottom: -10px;
      border-radius: 50%;
      left: -60px;
      box-shadow: 0.5vmin 0, 3vmin -1vmin #ffd, 3vmin -1vmin 0 0.5vmin;
      clip-path: polygon(0% 49%, 150% 51%, 150% 100%, 0% 100%);
      transform: rotateZ(-210deg) scaleX(-1);
  }

<div class="bubble-wrapper">
  <div class="bubble b r hb">Hello....</div>
</div>

uj5u.com熱心網友回復：

好吧，你可以使用 clip-path 屬性來創建尾部的東西。使用剪輯路徑，您可以創建您想要的任何型別的形狀。這是一些可能有助于了解有關剪輯路徑的更多資訊的鏈接。類似專案：https : //freefrontend.com/css-speech-bubbles/clip-path紀錄片：https : //developer.mozilla.org/en-US/docs/Web/CSS/clip-path

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/397293.html

標籤：css

上一篇：任何想法使輸入和按鈕行內？引導程式v5

下一篇：為什么HTML中的某些<hr>的高度不是0px？