使用css设置三角形
1.在开发中，有时候会用到一些小三角形来强调或者标记元素，这样以便区分不同的项目，然后把三角形绘制成一个比较明显的颜色，就达到效果了，那怎么才能画出三角形呢，之前我也不清楚，最近看到了有些网页在使用，在进行标记的时候，都是使用的是背景图片进行标记，这样在网页显示的时候，感觉有点生硬，毕竟图片的加载没有css加载那么顺畅
下面看一段代码：这里设置了一个span 元素为块级元素，分别设置border的四边都为不同的颜色：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
width: 100%;
margin: 50px 0;
text-align: center;
}
span {
position: relative;
margin: 0 auto;
display: block;
width: 50px;
height: 50px;
border-style: solid;
border-width: 50px;
border-top-color: red;
border-left-color: blue;
border-bottom-color: yellow;
border-right-color: black;
}
</style>
</head>
<body>
<div class="as">如何设置三角形?</div>
<div class="jindaobox">
<span class="sanjiao">
</span>
</div>
</body>
</html>
运行结果：发现四面的边框，居然是这种梯形的结构，如果把梯形上底变为0，不就是我们想要的三角形了么，而且这是使用html 和css做不来的，不存在使用静态页面就可以实行，不存在图片的不连续显示问题；
接下来就是把梯形的上底变为0 了
上底变为0 很简单，只要把元素的高和宽设置为0就可以了
width:----->0 得到上下两种箭头
height:------->0 得到左右两种箭头
1.当我们想要上箭头的时候，就把元素的左右边框和下边框去掉
2.当我们想要下箭头的时候，就把元素的左右边框和上边框去掉
3.当我们想要左箭头的时候，就把上下边框和右边框去掉
4.当我们想要右箭头的时候，就把上下边框和左边框去掉
想法是好的，试了一下，想要上加箭头：设置css如下：
span {
position: relative;
margin: 0 auto;
display: block;
width: 0px;
height: 0px;
border-style: solid;
border-width: 50px;
/* 设置上边框和左右边框宽度为0 开始*/
border-top-width: 0;
border-left-width: 0;
border-right-width: 0;
/* 设置上边框和左右边框宽度为0 开始*/
border-top-color: red;
border-left-color: blue;
border-bottom-color: yellow;
border-right-color: black;
}
运行结果：发现不行啊，什么都没有
那我们换个方法：既然设置宽度不行，那我们就设置颜色吧，只要把上，左，右边框的颜色设置为透明的，不就可以了么，css 中，刚好有一个设置颜色为透明的值
span {
position: relative;
margin: 0 auto;
display: block;
width: 0px;
height: 0px;
border-style: solid;
border-width: 50px;
/* 设置上边框和左右边框宽度为0 开始*/
border-top-color: transparent;
border-left-color: transparent;
border-right-color: transparent;
/* 设置上边框和左右边框宽度为0 开始*/
/* border-top-color: red;
border-left-color: blue; */
border-bottom-color: yellow;
/* border-right-color: black; */
}
运行结果：OK，大功告成！！！
设置下箭头：
span {
position: relative;
margin: 0 auto;
display: block;
width: 0px;
height: 0px;
border-style: solid;
border-width: 50px;
/* 设置上边框和左右边框宽度为0 开始*/
border-bottom-color: transparent;
border-left-color: transparent;
border-right-color: transparent;
/* 设置上边框和左右边框宽度为0 开始*/
border-top-color: red;
/* border-left-color: blue;
border-bottom-color: yellow;
border-right-color: black; */
}
设置左箭头：
span {
position: relative;
margin: 0 auto;
display: block;
width: 0px;
height: 0px;
border-style: solid;
border-width: 50px;
/* 设置上边框和左右边框宽度为0 开始*/
border-top-color: transparent;
border-bottom-color: transparent;
/* border-left-color: transparent; */
border-right-color: transparent;
/* 设置上边框和左右边框宽度为0 开始*/
/* border-top-color: red; */
border-left-color: blue;
/* border-bottom-color: yellow;
border-right-color: black; */
}
设置右箭头：
span {
position: relative;
margin: 0 auto;
display: block;
width: 0px;
height: 0px;
border-style: solid;
border-width: 50px;
border-top-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;
/* border-right-color: transparent; */
/* border-top-color: red;
border-left-color: blue;
border-bottom-color: yellow; */
border-right-color: black;
}
当然，css 还可写在一起，这样看起来要简单一些：
span {
position: relative;
margin: 0 auto;
display: block;
width: 0px;
height: 0px;
/* 先后设置上右下左的border-color属性都是一样的，需要哪个箭头，再设置哪个方向的颜色属性，这样，最后设置的属性覆盖了前面的属性，就变成箭头了 */
border: 50px solid transparent;
border-top-color: red;
}
以上，是使用html和css两项综合起来设置的箭头，可以不可以再设置简单一点呢？
下面，我采用class 属性来设置箭头，当需要箭头的时候，直接加上这个class 属性就可以，当不想要箭头的时候，去除调这个类就好了
下面来看一个例子：
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
width: 100%;
margin: 50px 0;
text-align: center;
} .jindaobox {
position: relative;
width: 980px;
margin: 20px auto; } li {
list-style: none;
float: left;
position: relative;
border: 1px solid #eee;
margin-right: 30px;
padding: 10px 20px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
} .active {
border: 1px solid red !important; } .active::after {
position: absolute;
content: "";
height: 0;
width: 0; border: 8px solid transparent;
border-top-color: red; top: 0;
left: 0;
right: 0;
margin: auto;
}
</style>
</head> <body>
<div class="as">请选择你喜欢的电影</div>
<ul class="jindaobox">
<li class="lis">飞龙在天</li>
<li class="lis active">紫川</li>
<li class="lis">封神演义</li>
<li class="lis active">风云第一刀</li>
<li class="lis">天外飞仙</li>
</ul> </body> </html>
运行结果：
这样，就实现了使用class 属性控制箭头的方式，当需要选中时，给li 元素加上一个active class 属性即可，当不需要时，就去除active class 属性
使用css设置三角形的更多相关文章
- CSS制作三角形和按钮
CSS制作三角形和按钮 用上一篇博文中关于边框样式的知识点,能制作出三角形和按钮. 我先说如何制作三角形吧,相信大家在平时逛网站的时候都会看到一些导航栏中的三角形吧,比如说: 网易首页的头部菜单栏中, ...
- css绘制三角形原理
1.新建一个元素,将它的宽高都设置为0:然后通过设置border属性来实现三角形效果,下面是css绘制三角形的原理: <!DOCTYPE html> <html> <he ...
- 纯CSS写三角形-border法
(1)有边框的三角形 我们来写下带边框的三角形. 如果是一个正方形,我们写边时,会用到border,但我们这里讨论的三角形本身就是border,不可能再给border添加border属性,所以我们需要 ...
- 经典CSS实现三角形图标原理解析
前言: 在写这篇文章之前,我也看过很多前端大神写的代码,But,都只是粘贴代码和给出显示效果,对于初学者来说大家都喜欢刨根问底,为什么要这样做呢? 接下来就让我给大家分享一下我对CSS实现三角形的理解 ...
- 用css制作三角形
用css制作三角形,主要是利用css元素给“盒模型”设置边框得到的. 上图,上边框和做边框,以及上边框和右边框的交合处,浏览器会按照直角的二分之一处绘制交合线.这是“盒模型”有宽和高时候的效果.我们假 ...
- 三种纯CSS实现三角形的方法
看到像上图这样的 tip 的小三角,你会怎么办? 切个图上去?恩,不错,简单,兼容性也一级棒,不但好控制,那点小东西也增加不了多少图片的大小.但有没有更好更讲究技巧的办法呢?哈哈,那必须有啊,而且还不 ...
- CSS实现三角形效果
类似三角形的形状的元素在网页中可能会用到,我们可以用图片或者CSS元素达到我们想要的效果.这里讲一下是讲自己使用HTML+CSS实现三角形的方式. 为了能够熟悉的使用HTML+CSS构建三角形,我们首 ...
- 纯 CSS 实现三角形尖角箭头的实例
上次无意中发现了个使用纯 CSS 实现三角形尖角箭头的方法 http://blog.csdn.net/zhouzme/article/details/18901943 ,但没有怎么用上,也没有详细完整 ...
- 各种demo：css实现三角形，css大小梯形，svg使用
各种demo: 1.css实现正方形 思路:width为0:height为0:使用boder-width为正方形的边长的一半,不占任何字节:border-style为固体:border-color为正 ...
随机推荐
- win10刻录光盘失败，一直显示有准备好写入到光盘中的文件
这是因为前面刻录留下的缓存导致的 解决方法是,删除系统刻录缓存文件 刻录缓存路径大概在以下位置(其中ase那个地方需要修改,改成自己的登录用户账号名即可) C:\Users\ase\AppData\L ...
- 20175202 《Java程序设计》第三周学习总结
20175209 2018-2019-2 <Java程序设计>第三周学习总结 教材知识点总结 1.编程语言发展阶段: 面向机器语言——面向过程语言——面向对象语言. 2.类声明: 类名必须 ...
- 18.24 Ubuntu修改静态IP
1.查询系统当前的ip地址配置信息,输入ifconfig命令进行查看 2.打开文件设置静态IP sudo vi /etc/network/interfaces 3.设置address ip.gatew ...
- Windows7 Autoconfiguration IPv4 Address 导致无法上网
Windows7 Autoconfiguration IPv4 Address 导致无法上 (2010-03-30 16:44:57) 转载▼ 标签: 杂谈 分类: 电脑软件问题 Windows7 A ...
- php使用select语句查询数据信息
<html> <head> <title>Finding User</title> </head> <body> <h2& ...
- Linux简易APR内存池学习笔记(带源码和实例)
先给个内存池的实现代码,里面带有个应用小例子和画的流程图,方便了解运行原理,代码 GCC 编译可用.可以自己上网下APR源码,参考代码下载链接: http://pan.baidu.com/s/1hq6 ...
- ASP.NET CORE 3 安装遇到的问题
最近在研究 ASP.NET CORE, visualstudio2019 也已正式发布,本以为安装vs2019后就默认支持asp.net core 3,谁知是不支持的,需单独安装net core 3及 ...
- Office2010安装出现“错误1907”的解决方法(未验证）
http://bbs.pcbeta.com/viewthread-1627988-1-5.html 这个问题我遇到过.解决方法:1.安装时提示错误选择忽略,安装完成后.2.如果能正常使用OFFICE软 ...
- sybase解决死锁
解决Sybase数据库死锁的方法 https://blog.csdn.net/lileizhang/article/details/45816509
- 未来-区块链-Micron：区块链永远不会忘记：内存对这项革命性技术的推动作用
ylbtech-未来-区块链-Micron:区块链永远不会忘记:内存对这项革命性技术的推动作用 1.返回顶部 1. 俗话说,大象永远不会忘记.区块链亦是如此. 内存是区块链的核心,它是一种以关键方式构 ...