画三角形

Mr_houzi 发布于2019-08-29 16:26 / 3177人阅读

摘要：在商品展示中，画三角形的出现的也挺多的，左上角的三角标签，又或者对话形式的三角形，带阴影效果等，在此记录下直接添加三角形想你呦比较长的写法简单写法使用伪类添加三角形附带阴影效果添加两个伪类一个伪类实现三角形，另一个用定位实

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

1、直接添加三角形


    
        
        想你呦

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

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


  邀请越多的好友，中奖几率越高哦！
  我知道了

.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;
}

正在努力学习中，若对你的学习有帮助，留下你的印记呗（点个赞咯^_^）

往期好文推荐：

前端面试之JavaScript（总结）

时间戳转换成时间日期格式及去重

webpack打包（有面试题）

idc机房托管私有云画三角形 html画三角箭头三角形三角形面积

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113749.html

如何用css画三角形

摘要：那问题来了，如何用来画三角形呢别着急，先来看看我所遇到过的三角形。如下图，有实心三角形，空心的，还有可以归为三角形的小箭头。画一个三角形，首先想到的是如何画三角形的形状，然后给一个背景颜色。在设计稿中，经常会出现好多三角形，如果将三角形变成图片，通过img标签的src或者background中的url来访问，从前端性能方面来看这并不好。那问题来了，如何用css来画三角形呢？别着急，先...

Yuqi 2019-08-30 13:06 评论0 收藏0
用CSS画一个带阴影的三角形的示例代码

摘要：思路怎么用画一个带阴影的三角形呢有童鞋说这还不简单吗网上有很多解决方案但其实大多都是实现不太完美的存在一些问题假设我们做一个向下的三角形箭头常见的方法大致有两种通过边框控制和设为透明设为预定的颜色即可通过旋转盒子方法一可以画三角形但是1. 思路怎么用CSS3画一个带阴影的三角形呢 ? 有童鞋说, 这还不简单吗网上有很多解决方案, 但其实大多都是实现不太完美的, 存在一些问题假设我们做一...

chunquedong 2019-04-23 11:43 评论0 收藏0
Canvas学习笔记（一）

摘要：学习资源来自慕课网炫丽的倒计时效果绘图与动画基础，非常感谢老师的课程分享创建标签的标签定义了一块画布，我们所有的绘图都是基于这一块画布。正是因为是基于状态的，所以不同的状态应该有明确的起始标志。喜欢前端，学习前端的最原始的动机，就是因为它可以制作非常酷炫的效果。然而现在上班所用的技巧，多是在业务逻辑那一块，并非是我最初想要去做的东西。所以在下班以后，打算重新拾起自己的兴趣，去学习真正...

codecraft 2019-08-19 17:30 评论0 收藏0
纯CSS画三角原理解析

摘要：纯画三角原理解析因为之前做一个页面出现了很多三角，开始直接用图片感觉并不是很好用，看着总是怪怪的颜色还很难调整的跟背景一样，就搜了一波代码直接用上了，事后想了一下感觉不知道具体原理是什么，很奇怪为什么边框能设置成三角的样式。纯CSS画三角原理解析因为之前做一个页面出现了很多三角，开始直接用图片感觉并不是很好用，看着总是怪怪的颜色还很难调整的跟背景一样，就搜了一波代码直接用上了，事后...

lidashuang 2019-08-30 14:03 评论0 收藏0