使用css实现三角符号

关于使用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设置鼠标属性的小手

    在元素中添加onmouseover="this.style.cursor='hand'"或者 cursor:pointer;

  2. 利用css制作带边框的小三角

    标签(空格分隔):css 在项目中会使用到的小实例,目前知道的有两种方法来实现 设置元素的宽和高,利用rotate实现,比较简单的一种 div{ width: 10px; height: 10px; ...

  3. 利用css伪类编写冒泡小三角

    HTML代码 <div class="lf otherLogin"> <span>其他方式注册</span> <div class=&qu ...

  4. 如何用css画出三角形

    看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...

  5. CSS技巧分享：如何用css制作横排二级下拉菜单

    原文:CSS技巧分享:如何用css制作横排二级下拉菜单 导航菜单是每个网站所必备的功能,也是每个学习制作网站的朋友所必须接触的,如何用css样式制作一个简单漂亮的二级下拉菜单呢,下来小编就一步一步教大 ...

  6. 纯css写带小三角对话框

    在实际样式中经常会遇到要写类似对话框的样式,而这种样式往往会有一个小三角,如下所示: 那么如何用css写出来呢,其实很简单,先让父元素相对定位,然后运用css的伪类before或after.就可以写个 ...

  7. css实现小三角（原理）

    效果图如图1所示:(简单示范,有点丑,莫介意) PS:兼容IE,FF , chrome ,360安全浏览器 先讲下原理吧,如图2所示: 这个div的样式如下所示: div{ width: 0px; h ...

  8. 如何用CSS实现在新窗口打开链接？

    *如何用CSS实现在新窗口打开链接? <style type="text/css"> <!-- .target2 a:active {test:expressio ...

  9. Animo.js ：一款管理 CSS 动画的强大的小工具

    Animo.js 是一个功能强大的小工具,用于管理 CSS 动画.它的特色功能包括像堆栈动画,创建跨浏览器的模糊,设置动画完成的回调等等.Animo 还包括惊人的 animate.css,为您提供了近 ...

随机推荐

  1. WPF中的菜单模板

    原文:WPF中的菜单模板 资源字典代码如下: <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xa ...

  2. 字符串匹配：从机器到后缀自己主动KMP

    后缀自己主动机(sam)对字符串匹配 ==== 我们已经配置了一个相对较短的模式字符串sam. 为P="abcabcacab", T[1..i]后缀.因此,它是sam最长前缀长度: ...

  3. JScript读取XML文件

    作者:朱金灿 来源:http://blog.csdn.net/clever101 JScript读取XML文件需要考虑msxml组件的多个版本,稳妥的做法是将所有版本都列出来. xml文件的内容如下: ...

  4. Android 百度地图 SDK v3.0.0 （四） 离线地图功能介绍

    转载请注明出处:http://blog.csdn.net/lmj623565791/article/details/37758097 一直认为地图应用支持离线地图非常重要啊.我等移动2G屌丝,流量不易 ...

  5. Python 实现 淘宝秒杀 聚划算 自己主动提醒 源代码

    说明 本实施例可以监视一起购买的成本button,当警报济济一堂花费时间整点到达(音频文件自定义位置)而自己主动跳出页面(URL习惯). 同一时候还能够通过命令行參数自己定义刷新间隔时间(默认0.1s ...

  6. Lizcst Software Lab新秀品牌上线！

    科友微电机是Lizcst Software Lab旗下品牌新秀,专业经营各种微型特种直流电机.微型发电机.微型电机配件.航模车模船模素材.教学科学小制作材料的网店.本店秉承Lizcst Softwar ...

  7. cocos2d-x 源代码分析 ： Ref （CCObject） 源代码分析 cocos2d-x内存管理策略

    从源代码版本号3.x.转载请注明 cocos2d-x 总的文件夹的源代码分析: http://blog.csdn.net/u011225840/article/details/31743129 1.R ...

  8. PHP中的序列化

    接口 Serializable { abstract public string serialize (void); abstruact public void unserialize (string ...

  9. MQTT开源代理Mosquitto源码分析（访问控制篇）

    一.整体流程概览 从GitHub下载源码后,代理的源码在src中,同时还用到了lib库中的一些函数.对项目的工作流程有个大概理解是分析mosquitto的访问控制权限的基础,网络上已有很多中文博客在介 ...

  10. Win8 Metro(C#)数字图像处理--2.56简单统计法图像二值化

    原文:Win8 Metro(C#)数字图像处理--2.56简单统计法图像二值化  [函数名称] 简单统计法图像二值化 WriteableBitmap StatisticalThSegment(Wr ...