<!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. 手持终端PDA应用固定资产管理系统（资产查询 盘点）软件程序系统

    一.产品概述 固定资产管理系统,是针对企事业单位内部资产管理中出现的工作量大.过程繁琐.追踪困难等一系列难题开发的一套先进管理软件.软件实现了对资产的多种方式管理,目前包括条形码.二维码.RFID管理 ...

  2. 车销 商场 批发零售无线POS开单 智能POS开单打印 开单APP应用-云POS扫描打印一体方案

    PDA数据采集器,是一款移动手持开单设备,它通过WIFI和GPRS连接并访问电脑,从进销存软件中读取数据,实现移动开单,打破电脑开单模式. 它自带扫描器,可直接扫描条码来查找产品,且功能强大.操作简单 ...

  3. PHP 生成二维码

    利用PHP QRcode生成二维码: php QRcode 官网 http://phpqrcode.sourceforge.net/ 在官网下载 phpqrcode.php就ok啦: 然后,查看自己的 ...

  4. 归并排序（Merge Sort）

    归并排序是建立在归并操作上的一种有效的排序算法,该算法是采用分治法(Divide and Conquer)的一个非常典型的应用.将已有序的子序列合并,得到完全有序的序列:即先使每个子序列有序,再使子序 ...

  5. iOS 为类添加Xib里面配置的view

    创建Empty文件,最好与其Controller同名, 在File's Owner的类属性里面指明其所属类(或者说它是个什么Controller), 从File's Owner右键拖向内部创建的视图( ...

  6. Android应用帧率--FPS测试

    Android应用帧率FPS是衡量应用流畅度的一个非常重要的指标,可以根据FPS对应用做一些优化,那么在开发过程中如何来测试我们的应用的FPS呢? 准备工具:Eclipse + Android测试终端 ...

  7. Codeforces 627A XOR Equation（思路）

    题目大概说两个正整数a.b,已知s=a+b以及x=a xor b的值,问有几种a.b这样的数对. 我知道异或相当于无进位的加法,s-x就是其各个位置的进位,比如s-x=1010,那就表示a和b的第1位 ...

  8. ccc 单点触控

    cc.Class({ extends: cc.Component, properties: { }, // use this for initialization onLoad: function ( ...

  9. .htaccess

    一.在Apache配置中启用Rewrite 打开配置文件httpd.conf: 1.启用rewrite# LoadModule rewrite_module modules/mod_rewrite.s ...

  10. Storm可靠性实例解析——ack机制

    对于Storm,它有一个很重要的特性:“Guarantee no data loss” ——可靠性 很显然,要做到这个特性,必须要track每个data的去向和结果.Storm是如何做到的呢——ack ...