<!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. AChartEngine使用View显示图表

    学习过AChartEngine的人肯定都知道,使用ChartFactory创建一张图表可以使用Intent方法,之后调用StartActivity来启用这个Intent,但是这么左右一个坏处,就是当你 ...

  2. Tomcat不输入项目名进入自己项目(根目录指向自己的项目)

    <Host name="localhost" appBase="webapps" unpackWARs="true" autoDepl ...

  3. Portlet简述

    一.Portlet是什么? Portlet是基于java的web组件,由portlet容器管理,并由容器处理请求,生产动态内容.Portals使用portlets作为可插拔用户接口组件,提供信息系统的 ...

  4. MatLab有关路径的几个命令

    窗外雨如注,国庆的第3天,没钱出去逛,更新我的博客吧 今天要说的命令有path.cd.userpath.savepath.pathtool 有两种改变启动目录的方法,第1种使用userpath和sav ...

  5. 怎么提高Jquery性能

    很久没有关注jQuery了,最近重新看了一下,看到一些不错的文章,转来坐一下笔记. 其内容和一些新提供的方法还是很多有值得学习的地方. 1. 使用最新版本的jQuery jQuery的版本更新很快,你 ...

  6. AngularJS $http

    $http 是 AngularJS 中的一个核心服务,用于读取远程服务器的数据.在服务器上读取数据: <div ng-app="myApp" ng-controller=&q ...

  7. 疯狂java学习笔记之面向对象(八) - static和final

    一.static: 1.static是一个标识符: - 有static修饰的成员表明该成员是属于类的; - 没有static修饰的成员表明该成员是属于实例/对象的. 2.static修饰的成员(Fie ...

  8. Open CV 图像显示（1）

      演示:读入一张图片,并显示   #include "stdafx.h"   #include <opencv2/core/core.hpp>   #include  ...

  9. node.js第一次

    随着时代的变迁,日月星辰轮回,不断的有新的事物被创造于世,作为在这个世界活着的前端工程崽的我,最近又接触了一门新手艺“node.js”.自从它2009年诞生至今,被很多前端推崇,我起步已经晚了,还好它 ...

  10. 51nod p1175 区间中第K大的数

    1175 区间中第K大的数 基准时间限制:1 秒 空间限制:131072 KB 分值: 160 难度:6级算法题   一个长度为N的整数序列,编号0 - N - 1.进行Q次查询,查询编号i至j的所有 ...