使用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为正 ...

随机推荐

EXCEL 批量添加单元格名称
在EXCEL单元格的值填入想为其设置的名称之后,调整下述代码的begin_line,begin_column,end_line,end_column的值,执行此宏,可用于批量为单元格设置名称. (注: ...
Windows文本文件上传至linux显示乱码解决方法
iconv -f gbk -t UTF-8 显示异常文本名 -o 另存为文件名 iconv -f gbk -t UTF-8 rkgxdt_new.log -o new
iproute
iproute之tc命令翻译地址,man tc的翻译 http://blog.csdn.net/ysdaniel/article/details/7905879
利用类的反射导入excel示例
直接上代码 1.页面展示 <div class="panel-heading font-bold text-center"> <i class="fa ...
el-popover 的显示或隐藏，要在拿到真实dom之后再做控制
el-popover 的显示或隐藏,要在拿到真实dom之后再做控制
python selenium-webdriver 处理JS弹出对话框（六）
在实际系统中,在完成某些操作时会弹出对话框来提示,主要分为"警告消息框","确认消息框","提示消息对话"三种类型的对话框. 1.警告消息框 ...
http://blog.csdn.net/u012905422/article/details/53340260
轉自:http://blog.csdn.net/u012905422/article/details/53340260 对于python2.7版本,很多教程(如http://stackoverflow ...
为毛GPU Cache不能移动顶点？
这篇文章属于典型的剥洋葱文,由表及里,逐步引入新的知识点,挖掘最本质的原因.这篇文的逻辑是先假设再证明,按照这个思路去阅读会比较轻松. Maya里的GPU Cache导入的几何体为什么不能编辑顶点?这 ...
C# .NET 实体类转Dictionary
-- System.Reflection.PropertyInfo[] cfgItemProperties = cfgItem.GetType().GetProperties(System.Refle ...
C# 6.0：nameof操作符
C# 6.0 引入了一个名为“nameof”的新的操作符,它的作用是接收元素而后返回元素名字.这个操作符能将class和class的所用成员,比如方法.变量以及属性作为参数而后返回一个它们的名字.这避 ...

使用css设置三角形

使用css设置三角形的更多相关文章

随机推荐

热门专题