linear-gradient和border:

.box {

position: relative;

padding: 10px; /* 重要 防止内容被覆盖 */

text-align: center;

border: 1px solid #f60;

border-radius: 5px;

}

.box::after {

content: '';

position: absolute;

left: 50%;

display: table;

width: 10px;

height: 10px;

margin-left: -5px;

transform: rotate(-135deg); /* 旋转矩形*/

z-index: 1; /* 覆盖在上面 */

bottom: -6px;

border-top: 1px solid #f60;

border-left: 1px solid #f60;

/* 角度：从右下角开始。 起始透明，渐变终点7px，结束颜色白色，结束终点0 */

background: linear-gradient(-45deg, transparent 7px, #fff 0);

/* background: linear-gradient(-45deg, red 7px, #fff 0); */

}