使用css实现常用的三角效果

项目中三角:

.breadcrumb{
height: 40px;
line-height: 40px;
padding: 0 20px;
border-top: 1px solid #f9c700;
.breadcrumb-title{
text-align: center;
font-size: @fontC;
//通过定义一个伪类after
&:after{
position: absolute;
content: '';
left: 89px;
top: 39px;
border-top: 9px solid @colorM;
//border-left和border-right换成透明色 才能形成三角形 不然是长方形
border-left: 12px solid transparent;
border-right: 12px solid transparent;
//background-color: red;
}
}

详细讲解

实现三角形的方式很多种。比较简单又比较常用的是利用伪类选择器,在网页上也有很多用到这种效果,比如tips信息提示框。下面是自己写的实心三角形,原理其实很简单,代码都能看懂。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.tri_top, .tri_right, .tri_bottom, .tri_left{
width: 150px;
height: 100px;
background: #CCCCCC;
border-radius: 8px;
margin: 50px 50px;
position: relative;
float: left;
}
.tri_top:before{
content: "";
width: 0px;
height: 0px;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #CCCCCC;
position: absolute;
top: -10px;
left: 65px;
}
.tri_right:before{
content: "";
width: 0px;
height: 0px;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid #CCCCCC;
position: absolute;
top: 40px;
left: 150px;
}
.tri_bottom:before{
content: "";
width: 0px;
height: 0px;
border-top: 10px solid #CCCCCC;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
position: absolute;
top: 100px;
left: 70px;
}
.tri_left:before{
content: "";
width: 0px;
height: 0px;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid #CCCCCC;
position: absolute;
top: 40px;
left: -10px;
}
</style>
</head>
<body>
<div class="tri_top"></div> <!--三角形在上边-->
<div class="tri_right"></div> <!--三角形在右边-->
<div class="tri_bottom"></div> <!--三角形在底边-->
<div class="tri_left"></div> <!--三角形在左边-->
</body>
</html>

空心三角形该怎样实现呢?看看以下代码,你会发现其实代码跟实心三角形的代码都是差不多。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.tri_top, .tri_right, .tri_bottom, .tri_left{
width: 150px;
height: 100px;
border: 1px solid #000000;
border-radius: 8px;
margin: 50px 50px;
position: relative;
float: left;
}
.tri_top:before{
content: "";
width: 0px;
height: 0px;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 15px solid #000000;
position: absolute;
top: -15px;
left: 65px;
}
.tri_top:after{
content: "";
width: 0px;
height: 0px;
border-left: 14px solid transparent;
border-right: 14px solid transparent;
border-bottom: 14px solid #FFFFFF;
position: absolute;
top: -14px;
left: 66px;
}
.tri_right:before{
content: "";
width: 0px;
height: 0px;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 15px solid #000000;
position: absolute;
top: 39px;
left: 150px;
}
.tri_right:after{
content: "";
width: 0px;
height: 0px;
border-top: 14px solid transparent;
border-bottom: 14px solid transparent;
border-left: 14px solid #FFFFFF;
position: absolute;
top: 40px;
left: 149px;
}
.tri_bottom:before{
content: "";
width: 0px;
height: 0px;
border-top: 15px solid #000000;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
position: absolute;
top: 101px;
left: 69px;
}
.tri_bottom:after{
content: "";
width: 0px;
height: 0px;
border-top: 14px solid #FFFFFF;
border-left: 14px solid transparent;
border-right: 14px solid transparent;
position: absolute;
top: 100px;
left: 70px;
}
.tri_left:before{
content: "";
width: 0px;
height: 0px;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-right: 15px solid #000000;
position: absolute;
top: 40px;
left: -15px;
}
.tri_left:after{
content: "";
width: 0px;
height: 0px;
border-top: 14px solid transparent;
border-bottom: 14px solid transparent;
border-right: 14px solid #FFFFFF;
position: absolute;
top: 41px;
left: -14px;
}
</style>
</head>
<body>
<div class="tri_top"></div> <!--三角形在上边-->
<div class="tri_right"></div> <!--三角形在右边-->
<div class="tri_bottom"></div> <!--三角形在底边-->
<div class="tri_left"></div> <!--三角形在左边-->
</body>
</html>

写在最后的一个道理: 三角形往哪个方向,那个方向无需设置border,而相反方向设置border颜色,相邻两边的border设为透明。这样就可实现各个方向的三角形

实心三角形利用CSS中的伪元素· :before实现,再利用border的transparent属性即可达到效果。而空心三角形是在空心三角形的基础上再加上伪元素:after实现。伪元素:before实现的是一个实心的三角形,伪元素:after实现的是空心的三角形,进而把实心的三角形覆盖,利用绝对定位的top与left的差值绝对了三角形线的粗细而达到如图的效果。

CSS伪类选择器实现三角形的更多相关文章

  1. CSS伪类选择器

    一.CSS伪类选择器用于给某些选择器添加效果语法规则:选择器:伪选择器例:a:link {color: #FF0000} 未访问的链接 a:visited {color: #00FF00} 已访问的链 ...

  2. 关于CSS伪类选择器

    #CSS伪类选择器 ##使用css伪类选择器需要注意的 使用css的伪类选择器来选择某元素时,需要特别注意 :first-child 和 :nth-child(n) 等时, 网页渲染是从语句的后面开始 ...

  3. CSS伪类选择器 - nth-child(an+b):

    CSS伪类选择器 - nth-child(an+b): 第一种:简单数字序号写法:nth-child(number)直接匹配第number个元素.参数number必须为大于0的整数.li:nth-ch ...

  4. CSS伪类选择器active模拟JavaScript点击事件

    一.说明 设置元素在被用户激活(在鼠标点击与释放之间发生的事件)时的样式. IE7及更早浏览器只支持a元素的:active,从IE8开始支持其它元素的:active. 另:如果需要给超链接定义:访问前 ...

  5. css伪类选择器的查找顺序

    当伪类选择器last-child.first-child无效时,就是因为不了解css伪类选择器的查找顺序造成选中某一元素失败. 先给出一段dom <body> <div>第一个 ...

  6. css伪类选择器及伪元素选择器

    1.类选择器 在css中可以使用类选择器把相同的元素定义成不同的样式.比如: 结果如下: 标题背景未变 2.伪类选择器 类选择器和伪类选择器的区别在于,类选择器我们定义的,而伪类选择器是CSS中已经定 ...

  7. CSS伪类选择器和伪元素选择器

    CSS的伪类选择器常用的是link/visited/hover/active,分别对应未访问.已访问过.鼠标悬停.鼠标按下时的样式,常用于链接,使用时要按此顺序依次写CSS,不能乱 a:link{ba ...

  8. css伪类选择器详细解析及案例使用-----伪类选择器(1)

    动态伪类选择器:E:link :选择匹配的E元素,并且匹配元素被定义了超链接并未被访问过.E:visited :选择匹配的E元素,而且匹配的元素被定义了连接并已被访问过.E:active :选择匹配的 ...

  9. css 伪类选择器制作登录框表单

    使用伪类选择器 制作鼠标悬停时文本框出现橙色虚线边框 制作鼠标激活时出现背景颜色淡橙色 使用css制作文本框圆角矩形效果,制作文本框背景图片,及背景不重复效果 <!DOCTYPE html> ...

随机推荐

  1. JVM 是用什么语言写的?

    JAVA中就虚拟机是其它语言开发的,用的是C语言+汇编语言  基于此之上就是JAVA本身了  虚拟机只起到解析作用另外,JAVA并不比C语言慢,说JAVA慢一般是九十年代那时候的JAVA, 而现在 在 ...

  2. X-MagicBox-820的luatOS之路连载系列4

    上次说到定位成功后,显示的数据准确性问题.专门查询了下我所在地区的经纬度信息. MagicBox的显示数据是这样的: 网络上查到的经纬度数据是这样的: 可以看出定位精度还可以,毕竟我这个查询的数据没有 ...

  3. [hdu6391]Lord Li's problem

    首先发现结果与需要改变的具体位置无关,只和需要改变的位置的个数有关,因此设f[i][j]表示选取了i个数字异或结果有j个1,只要分析接下来选择的数和这j个1有几个重合即可: 1. 三个数字全部重合,即 ...

  4. [atARC114F]Permutation Division

    由于是排列,即任意两个数字都各不相同,因此字典序最大的$q_{i}$就是将每一段的第一个数从大到小排序 接下来,考虑第一个元素,也就是每一段开头的最大值,分类讨论: 1.当$p_{1}\le k$时, ...

  5. Java-ASM框架学习-修改类的字节码

    Tips: ASM使用访问者模式,学会访问者模式再看ASM更加清晰 ClassReader 用于读取字节码,父类是Object 主要作用: 分析字节码里各部分内容,如版本.字段等等 配合其他Visit ...

  6. 21天从Java转向Go之第三天——初出茅庐

    名称 Go中25个关键字 只能在语法允许的地方使用,不能做为名称 break default func interface select case defer go map struct chan e ...

  7. 统计学习2:线性可分支持向量机(Scipy实现)

    1. 模型 1.1 超平面 我们称下面形式的集合为超平面 \[\begin{aligned} \{ \bm{x} | \bm{a}^{T} \bm{x} - b = 0 \} \end{aligned ...

  8. html中引入外部js文件,使用外部js文件里的方法

    外部js文件1: /** * 加了window.onload 后,直接引入js文件即可 * 页面资源全部加载完毕后会自动调用window.onload里的回调函数 */ window.addEvent ...

  9. 洛谷 P7163 - [COCI2020-2021#2] Svjetlo(树形 dp)

    洛谷题面传送门 神仙级别的树形 dp. u1s1 这种代码很短但巨难理解的题简直是我的梦魇 首先这种题目一看就非常可以 DP 的样子,但直接一维状态的 DP 显然无法表示所有情况.注意到对于这类统计一 ...

  10. 洛谷 P4426 - [HNOI/AHOI2018]毒瘤(虚树+dp)

    题面传送门 神仙虚树题. 首先考虑最 trival 的情况:\(m=n-1\),也就是一棵树的情况.这个我相信刚学树形 \(dp\) 的都能够秒掉罢(确信).直接设 \(dp_{i,0/1}\) 在表 ...