CSS伪类选择器实现三角形
使用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伪类选择器实现三角形的更多相关文章
- CSS伪类选择器
一.CSS伪类选择器用于给某些选择器添加效果语法规则:选择器:伪选择器例:a:link {color: #FF0000} 未访问的链接 a:visited {color: #00FF00} 已访问的链 ...
- 关于CSS伪类选择器
#CSS伪类选择器 ##使用css伪类选择器需要注意的 使用css的伪类选择器来选择某元素时,需要特别注意 :first-child 和 :nth-child(n) 等时, 网页渲染是从语句的后面开始 ...
- CSS伪类选择器 - nth-child(an+b):
CSS伪类选择器 - nth-child(an+b): 第一种:简单数字序号写法:nth-child(number)直接匹配第number个元素.参数number必须为大于0的整数.li:nth-ch ...
- CSS伪类选择器active模拟JavaScript点击事件
一.说明 设置元素在被用户激活(在鼠标点击与释放之间发生的事件)时的样式. IE7及更早浏览器只支持a元素的:active,从IE8开始支持其它元素的:active. 另:如果需要给超链接定义:访问前 ...
- css伪类选择器的查找顺序
当伪类选择器last-child.first-child无效时,就是因为不了解css伪类选择器的查找顺序造成选中某一元素失败. 先给出一段dom <body> <div>第一个 ...
- css伪类选择器及伪元素选择器
1.类选择器 在css中可以使用类选择器把相同的元素定义成不同的样式.比如: 结果如下: 标题背景未变 2.伪类选择器 类选择器和伪类选择器的区别在于,类选择器我们定义的,而伪类选择器是CSS中已经定 ...
- CSS伪类选择器和伪元素选择器
CSS的伪类选择器常用的是link/visited/hover/active,分别对应未访问.已访问过.鼠标悬停.鼠标按下时的样式,常用于链接,使用时要按此顺序依次写CSS,不能乱 a:link{ba ...
- css伪类选择器详细解析及案例使用-----伪类选择器（1）
动态伪类选择器:E:link :选择匹配的E元素,并且匹配元素被定义了超链接并未被访问过.E:visited :选择匹配的E元素,而且匹配的元素被定义了连接并已被访问过.E:active :选择匹配的 ...
- css 伪类选择器制作登录框表单
使用伪类选择器 制作鼠标悬停时文本框出现橙色虚线边框 制作鼠标激活时出现背景颜色淡橙色 使用css制作文本框圆角矩形效果,制作文本框背景图片,及背景不重复效果 <!DOCTYPE html> ...
随机推荐
- pytest-allure测试报告
该类型的警告大多属于版本更新时,所使用的方法过时的原因,可以在该方法的说明出查找替换的方法 1.安装allure a)下载allure.zip https://github.com/allure-fr ...
- 痞子衡嵌入式：深扒IAR启动函数流程及其__low_level_init设计对函数重定向的影响
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家分享的是IAR启动函数流程及其__low_level_init设计对函数重定向的影响. 上一篇文章 <IAR下RT-Thread工程自定义 ...
- 通过小乌龟从本地主机删除远端svn服务器端的代码或图片文件
先说解决方案,如果通过windows的右键删除,再次Commit还是会下拉下来,所以需要通过小乌龟的删除来删除这个文件,在删除的那个文件夹里再次提交即可. 图片 1. 选中要删除的文件 2. 右键通过 ...
- 调用企业微信API拨打紧急通知电话
# 前提条件:企业信息:行业类型必须属于"医疗"大类,客服反馈说目前不支持其他行业# 准备工作:https://work.weixin.qq.com/api/doc/90000/9 ...
- R数据分析：二分类因变量的混合效应，多水平logistics模型介绍
今天给大家写广义混合效应模型Generalised Linear Random Intercept Model的第一部分 ,混合效应logistics回归模型,这个和线性混合效应模型一样也有好几个叫法 ...
- [loj2049]网络
考虑整体二分,假设二分到区间$[l,r]$,即要对若干个询问,判断这些询问的答案与$mid=\lfloor\frac{l+r}{2}\rfloor$的关系 根据题意,答案$\le mid$等价于重要度 ...
- [atARC115F]Migration
称$k$个物品的位置$(a_{1},a_{2},...,a_{k})$为一个状态,并设初始状态为$S$,结束状态为$T$ 定义状态的比较:首先根据$\sum_{i=1}^{k}h_{a_{i}}$,即 ...
- CF1554E You
考虑到删点操作的实质是指认边的方向. 由于这是一棵树,所以有很好的性质. 我们完全可以以此从树叶开始,往上拓扑进行,按照对某个数的取膜的大小来进行操作. 由此可知,除了 \(1\) 以外,任意 \(2 ...
- 洛谷 P6071 『MdOI R1』Treequery（LCA+线段树+主席树）
题目链接 题意:给出一棵树,有边权,\(m\) 次询问,每次给出三个数 \(p,l,r\),求边集 \(\bigcap\limits_{i=l}^rE(p,i)\) 中所有边的权值和. 其中 \(E( ...
- C语言 自定义函数按行读入文件2
再改进下上次的读入一行函数,利用zlib库的gzgtec函数读取文件,动态分配内存,最后没有多出空行. 1 #include <stdio.h> 2 #include <stdlib ...