如何用css实现直接画出三角形以及对话形式的三角形（附代码）

在商品展示中，画三角形的出现的也挺多的，左上角的三角标签，又或者对话形式的三角形，带阴影效果等，在此记录下

1、直接添加三角形

<div class="triangleContainer">
 <div class="triangleContent">
 <div class="triangle"></div>
 <div class="title">想你呦</div>
 </div>
</div>
<style>
 body {
 background: #e5e5e5;
 }
 .triangleContainer {
 margin: 50px auto;
 width: 500px;
 height: 400px;
 background: #fff;
 }
 .triangleContent {
 position: relative;
 }
 .triangle {
 position: absolute;
 right: -70px;
 top: -70px;
 transform: rotate(45deg);
 /* 比较长的写法 */
 /*border-top: 70px solid transparent;*/
 /*border-bottom: 70px solid red;*/
 /*border-left: 70px solid transparent;*/
 /*border-right: 70px solid transparent;*/
 /* 简单写法 */
 border: 70px solid transparent;
 border-bottom-color: red;
 }
 .title {
 position: absolute;
 right: 8px;
 top: 17px;
 transform: rotate(45deg);
 font-size: 19px;
 color: #fff;
 }
</style>

2、使用伪类添加三角形（附带阴影效果）

添加两个伪类：一个伪类实现三角形，另一个用定位实现阴影效果

<view class="promptInfo">
 <text class="inviteMessage">邀请越多的好友，中奖几率越高哦！</text>
 <text class="clickMessage">我知道了</text>
</view>
.promptInfo{
 position: absolute;
 left: 5%;
 top: -28rpx;
 margin: 0 auto;
 padding: 20rpx 0;
 box-sizing: border-box;
 width: 88%;
 border-radius: 10rpx;
 z-index: 999;
 background: #fff;
 box-shadow: 3rpx 3rpx 3rpx rgba(0,0,0,.2);
 border: 0;
 font-size: 30rpx;
}
/* 添加与阴影颜色相同来形成三角形的阴影效果 */
.promptInfo::before{
 position: absolute;
 bottom: -21rpx;
 right: 110rpx;
 z-index: 999;
 border-top: 20rpx solid rgba(0,0,0,.2);
 border-left: 20rpx solid transparent;
 border-right: 20rpx solid transparent;
 content: ""
}
.promptInfo::after{
 position: absolute;
 bottom: -17rpx;
 right: 110rpx;
 z-index: 999;
 border-top: 20rpx solid #fff;
 border-left: 20rpx solid transparent;
 border-right: 20rpx solid transparent;
 content: ""
}
.promptInfo .inviteMessage{
 padding-left: 30rpx; 
}
.promptInfo .clickMessage {
 display: inline-block;
 margin-left: 15rpx;
 padding: 10rpx 20rpx;
 color: #fff;
 background: red;
 border-radius: 30rpx;
}