纯css在div上添加小三角

有些项目中会遇到这样的需求，就是div容器上要突出来一个小三角，如下图

虽然在功能上没啥意义，但是人家UI就是要这个小三角，你能怎么办，咱必须给他整出来！
我们用伪类和border来画这个小三角。

.box {//首先准备一个divheight:100px;width:100px;background: white;position: relative;
}
.box::before {  //这里就是小三角了content: "";display: block;position: absolute;left: -20px;  //给小三角定位，更具实际需求调整top: 75px;    //给小三角定位，更具实际需求调整border-width: 10px;border-style: dashed  solid  dashed  dashed;//四个参数分别代表向下，左，上右的小三角(对应方向的小三角设置为solid，其他的为dashed。我这里演示向左的小三角，所以设置第二个）border-color:transparent black transparent transparent;//四个参数分别代表向下，左，上右的小三角。对应方向的小三角设置你想要的颜色（为了直观我这里设置黑色），其他的为transparent。我这里演示向左的小三角，所以设置第二个。
}

这样我们就得到一个带小三角的div了。

这时候不算完，人家UI又说了，要有边框，hover后还得可以变色…如下

可我们这个小三角本身就是用border实现的，总不能给border加一个border吧。
没事…不慌，我们来个骚操作。
我们准备两个小三角，一个是白色的，一个是边框的颜色，让白色小三角覆盖在有边框颜色的小三角上，定位错开1px，这样看起来就像是有了1px的边框了！

html

<div class="mycard"><div class="triangle triangle_border" /><div class="triangle triangle_bg" />
</div>

css

.mycard {height:100px;width:100px;position: relative;
}
.triangle {position: absolute;top: 39px;overflow: hidden;width: 0;height: 0;border-width: 10px;border-style: dashed  solid  dashed  dashed;
}
.triangle_bg {left: -20px;z-index: 3;border-color:transparent white transparent transparent;
}
.triangle_border {left: -21px;border-color:transparent #E4E7ED transparent transparent;
}.mycard:hover .triangle_border {border-color:transparent #024EA5 transparent transparent;
}

这样就得到了有边框且hover会变色的小三角了。

纯css在div上添加小三角相关推荐

纯CSS在div上面添加小三角
用伪类和border可以来画这个小三角 .box {//首先准备一个divheight:100px;width:100px;background: white;position: relative; ...
纯css实现导航处hot小图标实现
先上效果图: 纯css实现导航处hot小图标实现 css代码: .shop{ position: relative; } .shop a:after{ background-color: red; b ...
在excel表格里，为所有数字添上绿色小三角
在excel表格里,为所有数字添上绿色小三角的方法有4种: 1. 为一个单元格添加:直接在单元格里添加一个英文的逗号 2. 为一列数据添加:选中要添加绿色小三角的列,选择数据-->分列--&g ...
纯css解决div隐藏浏览器原生滚动条，但保留鼠标滚动效果的问题
纯css解决div隐藏浏览器原生滚动条,但保留鼠标滚动效果的问题参考文章: (1)纯css解决div隐藏浏览器原生滚动条,但保留鼠标滚动效果的问题 (2)https://www.cnblogs.co ...
DataScience：数据生成之在原始数据上添加小量噪声进而实现构造新数据
DataScience:数据生成之在原始数据上添加小量噪声进而实现构造新数据目录数据生成之在原始数据上添加小量噪声进而实现构造新数据输出结果设计思路相关文章 DataScience:数据生成 ...
DataScience：数据生成之在原始数据上添加小量噪声(可自定义噪声)进而实现构造新数据(dataframe格式数据存储案例)
DataScience:数据生成之在原始数据上添加小量噪声(可自定义噪声)进而实现构造新数据(dataframe格式数据存储案例) 目录数据生成之在原始数据上添加小量噪声进而实现构造新数据代码实现
纯css实现div同行显示
纯css实现div同行,效果如下(由有10余年前台工作经验的工程师指导): 代码如下(可以直接用): <html> <head> <style type="te ...
title上添加小图片
title上添加小图片只需在head标签里引入图片即可具体操作如下第一步:把想添加的图片后缀改为.ico 第二步:引入图片(代码如下) 在这里插入代码片 <head> <lin ...
css做三角形横线加小三角,CSS创建三角形（小三角）的几种方法
你可以在很多地方看到三角形(小三角):tooltips提示框.下拉菜单.甚至在loading载入动画里.不管你喜欢还是不喜欢,这些小元素对各UI元素之间的联系关系式很重要的. 有一些不同的方法来设计并 ...

纯css在div上添加小三角

纯css在div上添加小三角

纯css在div上添加小三角相关推荐

最新文章

热门文章