本篇文章给大家带来的内容是关于如何用
css
实现直接画出三角形以及对话形式的三角形（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
在商品展示中，画三角形的出现的也挺多的，左上角的三角标签，又或者对话形式的三角形，带阴影效果等，在此记录下
1、直接添加三角形
2、使用伪类添加三角形（附带阴影效果）
添加两个伪类：一个伪类实现三角形，另一个用定位实现阴影效果
立即学习
“
前端免费学习笔记（深入）
”；
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
相关推荐：
css制作三角形，下拉框三角形_html/css_WEB-ITnose
用div+css实现三角形，三角形内有字_html/css_WEB-ITnose
css实现圆角三角形的方法
想你呦
邀请越多的好友，中奖几率越高哦！
我知道了
.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;
}