画三角形

时间：2023-03-30 16:53:11 CSS

在产品展示中，有不少绘制三角形。左上角的三角形标签，或者对话形式的三角形，有阴影效果等，记录在这里1.直接添加三角形

我想你了

2.使用伪类添加三角形（带阴影效果）添加两个伪类：一个伪类实现三角形，另一个使用定位实现阴影效果。邀请的朋友越多，中奖的机会就越高！我明白了.promptInfo{position:absolute;左：5%；顶部：-28rpx；保证金：0自动；填充：20rpx0；框大小：边框框；宽度：88%；边界半径：10rpx；z-指数：999；背景：#fff；盒子阴影：3rpx3rpx3rpxrgba(0,0,0,.2);:0;font-size:30rpx;}/*添加与阴影颜色相同的阴影效果，形成三角形*/.promptInfo::before{position:absolute;底部：-21rpx；右：110rpx；z-指数：999；border-top:20rpxsolidrgba(0,0,0,.2);左边框：20rpx纯色透明；border-right:20rpxsolidtransparent;内容：“”}.promptInfo::after{位置：绝对；:-17rpx;右：110rpx；z-指数：999；边框顶部：20rpx实心#fff;左边框：20rpx纯色透明；border-right:20rpxsolidtransparent;内容：“”}.promptInfo.inviteMessage{padding-left:30rpx;}.promptInfo.clickMessage{显示：内联块；左边距：15rpx；填充：10rpx20rpx；颜色：#fff；背景：红色；border-radius:30rpx;}正在努力学习，如果对你的学习有帮助，请留下你的印记（点赞^_^）过往好文推荐：前端面试JavaScript（总结）时间戳转换成时间以及日期格式和去重webpack打包（附面试题）

上一篇：浅谈前端图片优化

下一篇：快如闪电，触摸优先，新一代纯前端控件WijmoJS发布新版本

画三角形相关文章