关于使用css制作三角符号，网上有很多的例子了，在这里只是为了详细的向各位解释一下三角符号的原理

下图，是一个长宽为100px，边框宽度为100px的一个元素，由此可见，在css中上下左右的边框相交处并不是一个直线，所以，可以根据此属性进行编写三角符号

那么如何使用css的该属性来实现三角符号的效果呢，代码如下：

html代码

<body>

    <div></div>

</body>

css代码

div:after{

    position: absolute;

    width: 0px;

    height: 0px;

    content: " ";

    border-right: 100px solid transparent;

    border-top: 100px solid #ff0;

    border-left: 100px solid transparent;

    border-bottom: 100px solid transparent;

}

效果图：

这种方法是使用的伪类来实现的三角符号，然后使用绝对定位，不会占用空间

transparent是透明色，大家如果想要的三角符号的方向不一样，只需将对应方向的边框颜色加上，其他的改为透明色即可

感谢各位细心阅读，口才不好，如果您有更好的实现办法或者是其他的建议，可以评论留言，谢谢各位！

使用css实现三角符号的更多相关文章

  1. 纯CSS的三角符号

    项目中经常用到三角形,现在给大家讲下用纯CSS写的下三角实心图形 .triangle{ border-width: 5px 4px 0 4px; border-color: #454A7B trans ...

  2. 使用html+css实现三角标示符号

    我们平常打开某个网站的时候,常常会发现网页上很多导航或者指示条会使用一个三角符号去指向内容,效果简洁美观,甚至很多前端面试中也会提及如何在网页上实现一个三角符号,这里给出一个很简单使用的实现方式. 首 ...

  3. css实现三角的一些方法

    css实现三角没有想象中的那么难,只要明白border的各种属性的意思就很好明白css三角是如何实现的. 一下是几个很简单的例子:   css三角形状的制作:     css样式:    .trian ...

  4. ie Css Hack 特殊符号

    Css Hack 特殊符号 (1)* :IE6/7都能识别*,标准浏览器不识别(2)_:只有IE6识别(3)!Important:IE6不识别,Firefox,IE7/8/9.chorme等主流浏览器 ...

  5. border做三角符号

    用border做三角符号以及其他图形 ;; border-width:20px 10px; border-style:solid; border-color:#ff3300 #ff3300 #ffff ...

  6. 使用css制作三角

    1. 字符实现三角效果关于字符实现三角我早在09年的时候就介绍了:使用字符实现兼容性的圆角尖角效果.一转眼两年过去了,这个技术开始被越来越多的人所熟知.使用的字符是正棱形“◆”字符,编码表示为◆ . ...

  7. css实现三角箭头（兼容IE6)

    纯css实现三角箭头有几种方式,常规的方式用css3的rotate把元素旋转45度角,无法兼容ie的主要原因是ie不支持边框透明, 第二种方法,使用chroma滤镜透明,经尝试在ie下会出现activ ...

  8. select自定义下拉三角符号,css样式小细节

    本来没有写文章的习惯,但是闲下来了,整理资料,发现还挺纠结,对前端来说.所以整理下,希望对看到的人有所帮助,毕竟我不是前端开发. 起因,是前端告诉我select 框的三角箭头不能自定义.但是第二次的时 ...

  9. css 绘制对话框三角符号

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. Oracle执行SQL语句的过程

    转载至:http://blog.csdn.net/aqszhuaihuai/article/details/7024551 当我们提交一条sql语句时,Oracle会做哪些操作呢? Oracle会为每 ...

  2. Cassandra2.0.8导入到eclipse运行

    如果想通过eclipse来调试或者查看Cassandra的代码,将其project导入到eclipse之中不愧是个好选择.下面将讲述将2.0.8 版本导入elcipse的过程. 该篇文章主要参考的官方 ...

  3. app.module.ts说明

    import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; ...

  4. Springboot第五篇：结合myBatis进行SQL操作

    前提:和之前同样的,本篇会从前端和后台一起讲述关于SQL的select操作(其他操作原理大致类似,不多做解释了). 大致流程:前端通过AJAX将数据发送到后台的路由,后台路由会根据发送的数据进行SQL ...

  5. js 弹性导航

    <style> *{margin:0;padding:0;} #box{height:50px;float:left;position:relative;background:#f90;} ...

  6. markdown页面内跳转

    分两步 第一步 实际语法比较简单,在需要跳转的位置添加锚点,语法如下: <span id="jump">跳转到的地方</span> 第二步 在需要点击跳转的 ...

  7. Dijkstra+优先队列 堆优化

    关于堆优化 传统\(Dijkstra\),在选取中转站时,是遍历取当前最小距离节点,但是我们其实可以利用小根堆(STL的priority_queue)优化这个过程,从而大大降低复杂(\(O(V2+E) ...

  8. MongoDB学习笔记(二)

    MongoDB的其他方法: 显示指定数目的数据: 1.在mongodb中查询指定数目的记录,可以使用: db.collectionname.find().limit(number); 2.在mongo ...

  9. (转)QEMU 使用的镜像文件：qcow2 与 raw

    原文:https://www.ibm.com/developerworks/cn/linux/1409_qiaoly_qemuimgages/ qcow2 的基本原理 qcow2 镜像格式是 QEMU ...

  10. 【数组】Subsets II

    题目: Given a collection of integers that might contain duplicates, nums, return all possible subsets. ...