純css手寫圓角氣泡對話框 微信小程序和web都適用

嗯……我們設計師強烈要求一定要圓角！圓角的氣泡對話框，不要那種尖角的。這其中還遇上了個尷尬的問題，z-index不生效

無非就是兩種方法，一種是使用圖片再定位拼接起來使用，太簡單了具體就不詳細的說了。另一種方法就是border來寫了，雖然怎么寫都是尖角的，可是我想嘗試一下。純手寫寫出設計師想要的圓角吧

什么是圓角的？什么是尖角的？以下圖片可以對比出來:

這種是尖角：

這種是圓角：

 

尖角的方法網上一搜也是一大堆，其中有我最喜歡的阮大神的方法，阮大神博文在此（可點擊）：http://www.ruanyifeng.com/blog/2010/04/css_speech_bubbles.html

而圓角的一個思路是使用邊框加上背景色使用

html

<view class='dialog u-tri'>
    aaaaaaaaaa

</view>

web端把view標簽修改為div標簽即可

css

.dialog{
  position: relative;
  display: inline-block;
  width: 250px;
  background-color: green;
  padding: 30px;
  z-index: 2;
}

.u-tri::before{
  position: absolute;
  left: -4px;
  top: 4px;
  content: '';
  width: 50px;
  height: 50px;
  border-style:solid;
  border-width:2px;
  border-color: red ;
  border-radius:6px;
  background-color: red;
  transform:rotate(45deg);
  z-index: -1;
}

這里的 z-index 有個需要注意的地方，父必須得設置 z-index。如果不設置，那么 u-tri 會直接不見

效果

 

 

真機預覽和微信開發工具的一樣，把背景顏色都調成一樣的，調整下位置和大小即可解除設計師的怨念,

另外注意一下，小程序使用可以根據需要將px單位改成rpx單位。我這邊只做簡單演示，小程序端最好是使用rpx單位哈