关于使用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. java中复制bean

    BeanUtils.copyProperties(p,d); p是等待被赋值的对象,d是源对象,将d中属性值赋值的p中对应的字段,d中有的属性p中必须有,p可以有更多属性

  2. F6&F7adjust the volume

    Windows Registry Editor Version 5.00[HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Keyboard La ...

  3. JavaScript可视化框架——Echarts

    记录一款好用的JavaScript可视化框架: https://echarts.baidu.com/index.html 另 python库: pyecharts

  4. 【实战】Axis2后台Getshell

    实战遇到的情况---任意文件读取,读取/conf/axis2.xml内容,读取用户名和密码登录后台 当然弱口令也是屡试不爽的. 操作起来 1.上传cat.aar(链接:https://pan.baid ...

  5. 【Ubuntu】安装配置apahce

    安装apachesudo apt-get install apache2 安装目录 /etc/apache2配置文件 /etc/apache2/apache2.conf默认网站根目录 /var/www ...

  6. PHP之string之ord()函数使用

    ord (PHP 4, PHP 5, PHP 7) ord - Return ASCII value of character ord - 返回字符的 ASCII 码值 Description int ...

  7. 利用OC对象的消息重定向forwardingTargetForSelector方法构建高扩展性的滤镜功能

    在OC中,当像一个对象发送消息,而对象找到消息后,从它的类方法列表,父类方法列表,一直找到根类方法列表都没有找到与这个选择子对应的函数指针.那么这个对象就会触发消息转发机制. OC对象的继承链和isa ...

  8. Scrum 冲刺博客第四篇

    一.当天站立式会议照片一张 二.每个人的工作 (有work item 的ID),并将其记录在码云项目管理中 昨天已完成的工作 新建立了一个list页面用来显示题目,并且创建了列表用来进行题目的存放,将 ...

  9. C#、OC递归锁

    做ios也有1年了,C#的东西有些都忘记了,最近几天也打算重温一下,不能学了ios把C#给抛弃了,两者都要抓,一精多专.目前C#只是重温,重点是web这块.今天主要是想起了之前做过的面试题,虽然题比较 ...

  10. Java - 慎用tagged class

    作者的原标题是<Prefer class hierarchies to tagged classes>,即用类层次优于tagged class. 我不知道有没有tagged class这么 ...