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设置三角形的更多相关文章

  1. CSS制作三角形和按钮

    CSS制作三角形和按钮 用上一篇博文中关于边框样式的知识点,能制作出三角形和按钮. 我先说如何制作三角形吧,相信大家在平时逛网站的时候都会看到一些导航栏中的三角形吧,比如说: 网易首页的头部菜单栏中, ...

  2. css绘制三角形原理

    1.新建一个元素,将它的宽高都设置为0:然后通过设置border属性来实现三角形效果,下面是css绘制三角形的原理: <!DOCTYPE html> <html> <he ...

  3. 纯CSS写三角形-border法

    (1)有边框的三角形 我们来写下带边框的三角形. 如果是一个正方形,我们写边时,会用到border,但我们这里讨论的三角形本身就是border,不可能再给border添加border属性,所以我们需要 ...

  4. 经典CSS实现三角形图标原理解析

    前言: 在写这篇文章之前,我也看过很多前端大神写的代码,But,都只是粘贴代码和给出显示效果,对于初学者来说大家都喜欢刨根问底,为什么要这样做呢? 接下来就让我给大家分享一下我对CSS实现三角形的理解 ...

  5. 用css制作三角形

    用css制作三角形,主要是利用css元素给“盒模型”设置边框得到的. 上图,上边框和做边框,以及上边框和右边框的交合处,浏览器会按照直角的二分之一处绘制交合线.这是“盒模型”有宽和高时候的效果.我们假 ...

  6. 三种纯CSS实现三角形的方法

    看到像上图这样的 tip 的小三角,你会怎么办? 切个图上去?恩,不错,简单,兼容性也一级棒,不但好控制,那点小东西也增加不了多少图片的大小.但有没有更好更讲究技巧的办法呢?哈哈,那必须有啊,而且还不 ...

  7. CSS实现三角形效果

    类似三角形的形状的元素在网页中可能会用到,我们可以用图片或者CSS元素达到我们想要的效果.这里讲一下是讲自己使用HTML+CSS实现三角形的方式. 为了能够熟悉的使用HTML+CSS构建三角形,我们首 ...

  8. 纯 CSS 实现三角形尖角箭头的实例

    上次无意中发现了个使用纯 CSS 实现三角形尖角箭头的方法 http://blog.csdn.net/zhouzme/article/details/18901943 ,但没有怎么用上,也没有详细完整 ...

  9. 各种demo：css实现三角形，css大小梯形，svg使用

    各种demo: 1.css实现正方形 思路:width为0:height为0:使用boder-width为正方形的边长的一半,不占任何字节:border-style为固体:border-color为正 ...

随机推荐

  1. xamarin android 文件选择

    调出选择界面: Intent intent = new Intent(Intent.ActionGetContent); intent.AddCategory(Intent.CategoryOpena ...

  2. k8s基于CA签名的双向数字证书认证（三）

    1.设置kube-apiserver的CA证书相关的文件和启动参数   1)创建CA证书和私钥相关的文件 openssl genrsa -out ca.key openssl req -x509 -n ...

  3. Python之 Virtualenv简明教程

    virtualenv通过创建独立Python开发环境的工具, 来解决依赖.版本以及间接权限 问题. 比如一个项目依赖Django1.3 而当前全局开发环境为Django1.7, 版本跨度过大, 导致不 ...

  4. iOS Simulator 模拟器 与 Android Emulator 仿真器：为什么叫不同的英文名字？（待补充）

    iOS Simulator 模拟器 与 Android Emulator 仿真器:为什么叫不同的英文名字?(待补充)

  5. MySQL is running but PID file could not be found

    在Linux 中,当你启动或者重启 MySQL 时,报 关于 PID file 的错误 解决方法 第一步:找到   mysql 中 data 目录下的 mysql-bin.index 文件,然后删除 ...

  6. SSO+PHS 同步问题修正解决

    参照URL: https://blogs.technet.microsoft.com/latam/2018/03/27/using-the-consistencyguid/ https://chinn ...

  7. HTML 部分非常用标签

    标签 描述 示例 <!DOCTYPE>  定义文档类型. HTML5 : <!DOCTYPE html> HTML4.* :<!DOCTYPE HTML PUBLIC & ...

  8. 关于mybatis中传入一个List，字符串数组，或者Map集合作为查询条件的参数

    一.入参为List的写法: <select id="queryParamList" resultType="map" parameterType=&quo ...

  9. C++ 线性搜索算法演示的代码

    将做工程过程中比较好的内容做个备份,下边代码段是关于C++ 线性搜索算法演示的代码. #include<iostream>#include<conio> int linears ...

  10. centos7安装mysql，以及设置root密码

    1.首先进入mysql官网的下载-社区https://dev.mysql.com/downloads/ 2.点击下载后,切换版本5.7(这里的版本对于rpm没有作用),然后在新的页面中选择操作系统 3 ...