css 手写气泡

示例：我们要手写如下的一个气泡时

 css 代码：

.dashed-box {
  width: 400px;
  height: 200px;
  margin-left: 10%;
  border: 1px dashed #ccc;
  padding: 20px;
  position: relative;
}
.dashed-box .arrow {
  width: 15px;
  height: 15px;
  background-color: #ffffff;
  border: 1px dashed  #ccc;
  border-right: 0px;
  border-bottom: 0px;
  position: absolute;
  top: -8px;
  left: 30px;
  transform:rotate(45deg);
}

html 代码

<div class="dashed-box"> 
  <div class="arrow"></div> 
</div>