<!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

     <title></title>

     <style>

         body{

             padding:20px;

         }

         .arrow-down {

             width: 0;

             height: 0;

             border-left: 20px solid transparent;

             border-right: 20px solid transparent;

             border-top: 20px solid #0066cc;

         }

         .f {

             width: 0;

             height: 0;

             border-right: 40px solid #ff0000;

             border-left: 40px solid #ff0000;

             border-bottom: 40px solid #000;

             border-top: 40px solid #000;

         }

         .t1{

             height:50px;

             width:50px;

             background:#fff;

         }

         .t2 {

             height: 50px;

             width: 50px;

             background: #fff;

             border-top: 10px solid #f00;

             border-right: 10px solid #0f0;

         }

         .t3 {

             height: 50px;

             width: 50px;

             background: #fff;

             border-top: 10px solid #f00;

             border-right: 10px solid #0f0;

             border-bottom: 10px solid #f00;

             border-left: 10px solid #0f0;

         }

         .t4 {

             height: 0px;

             width: 0px;

             background: #fff;

             border-top: 10px solid #f00;

             border-right: 10px solid #0f0;

             border-bottom: 10px solid #f00;

             border-left: 10px solid #0f0;

         }

         .t5 {

             height: 0px;

             width: 0px;

             border-top: 10px solid #f00;

             border-right: 10px solid transparent;

             border-bottom: 10px solid #f00;

             border-left: 10px solid transparent;

         }

         .t6 {

             height: 0px;

             width: 0px;

             border-right: 10px solid transparent;

             border-bottom: 10px solid #f00;

             border-left: 10px solid transparent;

         }

     </style>

 </head>

 <body style="background:#ccc">

     <div class="t1"></div><br /><br />

     <div class="t2"></div><br /><br />

     <div class="t3"></div><br /><br />

     <div class="t4"></div><br /><br />

     <div class="t5"></div><br /><br />

     <div class="t6"></div><br /><br />

 </body>

 </html>

测试效果图：

css 实现三角形的原理的更多相关文章

  1. CSS实现三角形图标原理解析

    CSS实现三角形图标原理解析: border边框语法: border 四条边框设置border-left 设置左边框,一般单独设置左边框样式使用border-right 设置右边框,一般单独设置右边框 ...

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

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

  3. CSS绘制三角形的原理剖析

    今天学习Bootstrap时候,看到按钮的向下三角形源码: .caret { display: inline-block; ; ; margin-left: 2px; vertical-align: ...

  4. CSS创造三角形的原理

    其实就是利用了div各方向border的接驳点产生的斜线的特点,知道原理后就不觉得有多不可思议了.. .triangle_up { height: 0px; width: 0px; border-bo ...

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

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

  6. css绘制三角形原理

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

  7. css画三角形原理解析

    <div id="div1"></div><div id="div2"></div><div id=&qu ...

  8. css实现三角形及应用示例

    css实现三角形,网上讲了很多,但我发现一般都是三角向上或者向下的,向左向右这两方向似乎讲得很少,本人试了一下,发现原来在IE下很难搞~~(万恶的IE)...css实现三角形的原理是:当元素的宽高为0 ...

  9. css实现三角形（转）

    css实现三角形 (2012-09-10 14:17:26) 标签: css 三角形 杂谈 分类: 网页制作 css实现三角形的原理是:当元素的宽高为0,边框(border)不为0时,四个角边框交界重 ...

随机推荐

  1. 记一次小团队Git实践(中)

    对于初学者,从使用上先入手,往往学的最快,并从中汲取教训,再回头更深入的学习,效果尤佳. 安装git 安装git自不必说,mac已经内置了git,linux下一个命令就能搞定,windows下需要下载 ...

  2. 2016.8.16 HTML5重要标签及其属性学习

    1.运用BootStrap的基本布局: 2.基本布局第二步: ] 3.BootStrap提供了一个class=”well“”类,可以给你种深度的感觉: 4.不是每一个类都是为了CSS,有些类创建出来只 ...

  3. 【面试题】BD

    一面: 自我介绍,简单介绍项目: /***********发现项目没什么可问的,然后开始各种基础知识o(╯□╰)o************/ 内存结构,低地址,高地址: STL底层实现,set是否有序 ...

  4. DIjkstra(反向边) POJ 3268 Silver Cow Party || POJ 1511 Invitation Cards

    题目传送门 1 2 题意:有向图,所有点先走到x点,在从x点返回,问其中最大的某点最短路程 分析:对图正反都跑一次最短路,开两个数组记录x到其余点的距离,这样就能求出来的最短路以及回去的最短路. PO ...

  5. UVa1212 Duopoly（最小割）

    题目大概说有两家通讯公司,它们分别有几个投标,投标各有价值且各个投标都包含几个频道,相同公司的各个投标包含频道都是互不相同的,而频道不能被同时选用.问怎么选择采取哪家公司哪些投标使得价值最大. 如此建 ...

  6. 【转】敏捷开发 Scrum 总结

    转:http://www.open-open.com/lib/view/open1330413325514.html 最近把之前学习 Scrum 的资料整理为一篇文档,在接下来的团队和项目开发中,根据 ...

  7. HDU 3074 (线段树+模P乘法)

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=3074 题目大意:单点更新.维护序列乘法.mod 1000000007. 解题思路: 10000000 ...

  8. ACM 另一种阶乘问题

    另一种阶乘问题 时间限制:3000 ms  |  内存限制:65535 KB 难度:1   描述 大家都知道阶乘这个概念,举个简单的例子:5!=1*2*3*4*5.现在我们引入一种新的阶乘概念,将原来 ...

  9. XCODE shouldAutorotateToInterfaceOrientation 对于不同版本 设备旋转不同方向时 视图的相应旋转方向的实现

    对于版本号不同的设备,旋转时视图的要做出相应的旋转,那么版本不同,代码的实现是如何的,如何对旋转方向做出限制?下面是小编的个人看法! //版本号为3.5 -5.0 -(BOOL)shouldAutor ...

  10. 【BZOJ】2697: 特技飞行

    题意 \(k(1 \le k \le 300)\)种物品,价值分别为\(c_i(0 \le c_i \le 1000)\).有\(n(1 \le n \le 1000)\)分钟,每分钟可以选择一个物品 ...