如图所示，这样的tips提示样式用html+css怎么写？

Question

尤其是尖角样式，该如何处理？或者有其他属性可以直接弹出提示？

Answer 1

当然是伪元素+边框处理了

<div></div>

div {  position: relative;  width: 100px;  height: 50px;  background: #ccc;  margin-top: 10px;
}div:after {  content: '';  position: absolute;  top: -20px;left:10px;  border: 10px solid transparent;  border-bottom-color: red;
}