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. Actifio如何保护和管理Oracle-带外篇

    引言 本文提供CDS带外环境下相关配置,保护和恢复Oracle的所需步骤. 目的是提供Oracle数据库配置前的详细说明,Actifio环境下发现和配置Oracle数据库,执行还原和恢复,以及配置Or ...

  2. MySQL 表字段操作

    MySQL 表字段操作 一.增加表字段 1)mysql> alter table 二.删除表字段 三.修改表字段

  3. C/C++ 控制台字体的变颜变色

    先扔一个链接上来,因为怕忘: https://blog.csdn.net/stude/article/details/7645056 https://blog.csdn.net/lindorx/art ...

  4. Cocostudio 1.4 实现的Demo程序源码

    开发环境是CocoStudio 1.4 + Cocos2dx 2.2.3  把项目文件放到Cocos2dx下的projects文件夹下就可以执行了 压缩包里面包括了 源码 和资源文件 1.DemoSh ...

  5. Ubuntu安装ssh 与samba

    1.安装ssh服务 sudo apt-get install openssh-server 2.开启ssh(/etc/init.d文件夹) sudo service ssh start 2.安装sam ...

  6. fragment滑动界面

    1.代码页面 package com.example.fragment_list_copy; import android.app.FragmentManager;import android.sup ...

  7. 将golang中变量重置为零的reflect方法

    下面给出简单的代码,这里通过将变量重置为零来实现过滤字段的目的: type student struct { Age int `json:"age,omitempty"` Name ...

  8. uWSGI的配置与发布

    参考:   https://www.cnblogs.com/pyyu/p/9481344.html 一.什么是wsgi, uwsgi, uWSGI wsgi 全称web server gateway ...

  9. mysql之工具的使用总结(mac版本)

    13.mysql Mac终端操作 12.MySql在Mac上的安装与配置详解: 11.mac下安装mysql5.7.18,连接出现Access denied for user 'root'@'loca ...

  10. git --- 持续更新

    东转西转 git 1 git 使用 1.1 git 安装 ~$: sudo apt-get install git 1.2 git 初始化 ~$: git init ~$: git remote ad ...