CSS学习——带三角形的对话框、输入框下的提示框

• 普通三角形

.tri{
     border-top: transparent 0px solid;
     border-bottom: red 50px solid;
     border-right: transparent 50px solid;
     border-left: transparent 50px solid;
     width:0;
     height:0;
}

<div class="tri"></div>

• 红色边框的三角形

.tri{
     position: relative;
     border-top: transparent 0px solid;
     border-bottom: red 50px solid;
     border-right: transparent 50px solid;
     border-left: transparent 50px solid;
     width: 0;
     height: 0;
}
.tri:after{
     position: absolute;
     content: "";
     border-top: transparent 0px solid;
     border-bottom: white 40px solid;
     border-right: transparent 40px s