對話框效果

做法剖析

background-color做普通的方框+用複雜的border做三角形
舊文連結:用CSS做出三角形

h1 這是一段標題
h1
 background: teal
 color: #fff
 padding: 10px 20px
 position: relative
 &:after
  content: ''
  border-right: 15px solid transparent
  border-left: 15px solid transparent
  border-top: 25px solid teal
  position: absolute
  bottom: -25px
  left: 30px