1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         .caret0{
  8.             width:0;
  9.             height:0;
  10.             border: 5px solid #000;
  11.         }
  12.         .caret1{
  13.             width:0;
  14.             height:0;
  15.             border-top: 5px solid #000;
  16.             border-left: 5px solid #fff;
  17.             border-right: 5px solid #fff;
  18.             border-bottom: 5px solid #000;
  19.         }
  20.         .caret2{
  21.             width:0;
  22.             height:0;
  23.             border-top: 5px solid #fff;
  24.             border-left: 5px solid #f00;
  25.             border-right: 5px solid #f00;
  26.             border-bottom: 5px solid #fff;
  27.         }
  28.         .caret2{
  29.             width:0;
  30.             height:0;
  31.             border-top: 5px solid #fff;
  32.             border-left: 5px solid #f00;
  33.             border-right: 5px solid #f00;
  34.             border-bottom: 5px solid #fff;
  35.         }
  36.         .caret3{
  37.             width:0px;
  38.             height: 0px;
  39.             border-bottom: 5px solid #000;
  40.             border-left: 5px solid transparent;
  41.             border-right: 5px solid transparent;
  42.         }
  43.         .caret4{
  44.             width:0px;
  45.             height: 0px;
  46.             border-right: 5px solid #000;
  47.             border-top: 5px solid transparent;
  48.             border-bottom: 5px solid transparent;
  49.         }
  50.         .caret5{
  51.             width:0px;
  52.             height: 0px;
  53.             border-top: 5px solid #000;
  54.             border-left: 5px solid transparent;
  55.             border-right: 5px solid transparent;
  56.         }
  57.         .caret6{
  58.             width:0px;
  59.             height: 0px;
  60.             border-left: 5px solid #000;
  61.             border-top: 5px solid transparent;
  62.             border-bottom: 5px solid transparent;
  63.         }
  64.     </style>
  65. </head>
  66. <body>
  67. <h1>通过border的设置的三角形</h1>
  68. <div class="caret0"></div>
  69. <div class="caret1"></div>
  70. <br>
  71. <div class="caret0"></div>
  72. <br>
  73. <div class="caret1"></div>
  74. <br>
  75. <div class="caret2"></div>
  76. <br>
  77. 向上的三角形
  78. <div class="caret3"></div>
  79. <br>
  80. 向左的三角形
  81. <div class="caret4"></div>
  82. <br>
  83. 向下的三角形
  84. <div class="caret5"></div>
  85. <br>
  86. 向右的三角形
  87. <div class="caret6"></div>
  88. </body>
  89. </html>

caret彻底的理解css的三角形【通过border】的更多相关文章

  1. 纯css画三角形

    纯css画三角形与border元素相关 设置border的属性 width: 100px; height: 100px; border-style: solid; border-width: 100p ...

  2. CSS 制作三角形原理剖析

    使用css制作三角形其实原理很简单,下面一步步解析. 1.html代码如下 <div class="triangle"> </div> 2.CSS代码 .t ...

  3. css绘制三角形原理

    1.新建一个元素,将它的宽高都设置为0:然后通过设置border属性来实现三角形效果,下面是css绘制三角形的原理: <!DOCTYPE html> <html> <he ...

  4. 经典CSS实现三角形图标原理解析

    前言: 在写这篇文章之前,我也看过很多前端大神写的代码,But,都只是粘贴代码和给出显示效果,对于初学者来说大家都喜欢刨根问底,为什么要这样做呢? 接下来就让我给大家分享一下我对CSS实现三角形的理解 ...

  5. CSS画三角形引发的一些思考

      今天刷知乎时看到了一个问题,有谁能详细讲一下css如何画出一个三角形?怎么想都想不懂? - 知乎.很巧,刚入前端坑的我前不久也遇到过这个问题,今天再来谈一谈这个问题则是因为知乎的一些答案引发了我的 ...

  6. CSS实现三角形、梯形、平行四边形、圆形、椭圆形、对话框、自适应正方形

    本文篇幅较长,希望能坚持看完,转载请注明出处,如果觉得好文请给个赞吧 CSS实现梯形 CSS实现三角形和梯形主要是依靠border是梯形的特性来做的,有点像相框的那种感觉. 首先我们先给一个正方形设置 ...

  7. 理解CSS

    写在前面的话:对于web开发,html完成网页的structure,css完成网页的presentation,js完成网页的behavior,今天就来说一说css,通过理解一些css的基础概念,能够更 ...

  8. CSS制作三角形和按钮

    CSS制作三角形和按钮 用上一篇博文中关于边框样式的知识点,能制作出三角形和按钮. 我先说如何制作三角形吧,相信大家在平时逛网站的时候都会看到一些导航栏中的三角形吧,比如说: 网易首页的头部菜单栏中, ...

  9. 深入理解css BFC 模型

    如果要深入理解css布局的各种原理,要在重构页面做得心应手的话,那么你就必须先理解这玩意 "BFC" , BlockFormatting Context(块级格式化上下文): 这里 ...

随机推荐

  1. （八）Android广播接收器BroadcastReceiver

    一.使用Broadcast Reciver 1.右击java文件夹,new->other->Broadcast Receiver后会在AndroidManifest.xml文件中生成一个r ...

  2. windows server 2003进行相邻磁盘扩容（server 2008的直接右键就可以解决）

    vCenter下的win server 2003 的D盘需要扩容,解决办法是,先将D盘由原来的200GB增加到了2TB(win server 2003选择MBR的限制),重启win server 20 ...

  3. sql server sys.object表字段说明

    列名 数据类型 说明 name sysname 对象名. object_id int 对象标识号. 在数据库中是唯一的. principal_id int 如果不是架构所有者,则为单个所有者的 ID. ...

  4. IntPtr问题

    public aaa(IntPtr myPtr,int left, int top, int width, short height) 这里myPtr应该是对应到一块内存,你需要查看aaa函数是如何把 ...

  5. JAVA 8 新特性和改进

    Java 8的所有新特性及改进包括(JEP全称为JDK Enhancement Proposal,JDK改进建议): 语言改进: JEP 126:Lambda表达式 & 虚拟扩展方法 JEP ...

  6. pycharm Run/Debug Configrations

    操作系统是win10,今天维护scrapy爬虫的时候发现pycharm调试配置失效了,导致花了好大力气去搜索配置的路径.在这儿记录下来方便以后查看. Script:C:\Python27\Lib\si ...

  7. wifi 攻破

    链接1 wifi 加密方式 1,wep加密 2.WPA/WPA2-PSK加密 WPA2 的破解方式: 1 爆力破解 2,pin 破解 1) 先破解 pin 码 2)再用 minidwep-gtk 破解

  8. Spring注释(转)

    转自:http://www.ibm.com/developerworks/cn/java/j-lo-spring25-ioc/#ibm-pcon 概述 注释配置相对于 XML 配置具有很多的优势: 它 ...

  9. Firebug入门指南（转）

    据说,对于网页开发人员来说,Firebug是Firefox浏览器中最好的插件之一. 我最近就在学习怎么使用Firebug,网上找到一篇针对初学者的教程,感觉比较有用,就翻译了出来. 作者:Estell ...

  10. 2014第11周一word样式

    今天摸索使用了word的样式替换功能感觉不错,简单记录下: 1.将某一个样式的标题统一替换为另一样式,之前一般是格式化一个个找到标题设置格式, 今天才发现可以选中标题->在浮动框上单击样式或开始 ...