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

随机推荐

Spring Cloud Gateway实战之四：内置predicate小结
欢迎访问我的GitHub https://github.com/zq2599/blog_demos 内容:所有原创文章分类汇总及配套源码,涉及Java.Docker.Kubernetes.DevOPS ...
VS2013中using System.Windows.Forms;引用不成功
命名空间"System"中不存在类型或命名空间名称"Windows" 项目右侧--解决资源管理器---引用---右键--添加引用---在.NET下拉框找---找 ...
[uoj173]鏖战表达式
2018年论文题,上接loj2506,主要是论文中的第4章,也可快速跳至原题解 5.平衡树的嵌套问题平衡树嵌套所谓平衡树嵌套,就是若干棵平衡树,其中若干棵平衡树的根会指向另一颗平衡树上的一个节点 ...
[loj2506]tree
2018年论文题,以下是论文前3章主要内容,与原题解相关部分为第4章中的启发式合并,也可快速跳至原题解 1.复杂度分析 Treap 定理1:$n$个节点的Treap的期望深度为$o(\log n)$ ...
[bzoj5418]屠龙勇士
很显然,每一步所选的剑和怪物都是确定的,可以先求出来(不用写平衡树,直接用multiset即可,注意删除要删指针,以下假设第i次攻击用ki攻击的剑,攻击第i只怪) 首先判断无解,即如果存在ai使得g ...
[luogu3334]抛硬币
(数据范围的公式渲染有一些问题,大概是$a\le b\le 100$) 同洛谷4548,推导过程省略,直接给出答案-- 令$p_{H}=\frac{b}{a}$,$p_{T}=\frac{b}{b-a ...
CSharp使用Thrift作为RPC框架入门(一)
前言本文将介绍由 Facebook 开发的远程服务调用框架 Apache Thrift,它采用接口描述语言定义并创建服务,支持可扩展的跨语言服务开发,所包含的代码生成引擎可以在多种语言中,如 C++ ...
Codeforces 1458E - Nim Shortcuts（博弈论+BIT）
Codeforces 题目传送门 & 洛谷题目传送门首先看到这样的题我们不妨从最特殊的情况入手,再逐渐推广到一般的情况.考虑如果没有特殊点的情况,我们将每个可能的局面看作一个点 \((a,b ...
DirectX12 3D 游戏开发与实战第十章内容（下）
仅供个人学习使用,请勿转载.谢谢! 10.混合本章将研究混合技术,混合技术可以让我们将当前需要光栅化的像素(也称为源像素)和之前已经光栅化到后台缓冲区的像素(也称为目标像素)进行融合.因此,该技术可 ...
【数据处理】python将GO注释结果整理为WEGO文件
通常,比对NR库后为m8格式,通过NR和GO数据库对应关系文件,写代码整理为Gene-->GO文件,如下: 这里是一对一的关系,要转换为WEGO格式文件,即一对多关系,如下: 用python脚本 ...

CSS伪类选择器实现三角形

项目中三角：

详细讲解

CSS伪类选择器实现三角形的更多相关文章

随机推荐

热门专题