css 实现三角形的原理
<!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 实现三角形的原理的更多相关文章
- CSS实现三角形图标原理解析
CSS实现三角形图标原理解析: border边框语法: border 四条边框设置border-left 设置左边框,一般单独设置左边框样式使用border-right 设置右边框,一般单独设置右边框 ...
- 经典CSS实现三角形图标原理解析
前言: 在写这篇文章之前,我也看过很多前端大神写的代码,But,都只是粘贴代码和给出显示效果,对于初学者来说大家都喜欢刨根问底,为什么要这样做呢? 接下来就让我给大家分享一下我对CSS实现三角形的理解 ...
- CSS绘制三角形的原理剖析
今天学习Bootstrap时候,看到按钮的向下三角形源码: .caret { display: inline-block; ; ; margin-left: 2px; vertical-align: ...
- CSS创造三角形的原理
其实就是利用了div各方向border的接驳点产生的斜线的特点,知道原理后就不觉得有多不可思议了.. .triangle_up { height: 0px; width: 0px; border-bo ...
- CSS 制作三角形原理剖析
使用css制作三角形其实原理很简单,下面一步步解析. 1.html代码如下 <div class="triangle"> </div> 2.CSS代码 .t ...
- css绘制三角形原理
1.新建一个元素,将它的宽高都设置为0:然后通过设置border属性来实现三角形效果,下面是css绘制三角形的原理: <!DOCTYPE html> <html> <he ...
- css画三角形原理解析
<div id="div1"></div><div id="div2"></div><div id=&qu ...
- css实现三角形及应用示例
css实现三角形,网上讲了很多,但我发现一般都是三角向上或者向下的,向左向右这两方向似乎讲得很少,本人试了一下,发现原来在IE下很难搞~~(万恶的IE)...css实现三角形的原理是:当元素的宽高为0 ...
- css实现三角形（转）
css实现三角形 (2012-09-10 14:17:26) 标签: css 三角形 杂谈 分类: 网页制作 css实现三角形的原理是:当元素的宽高为0,边框(border)不为0时,四个角边框交界重 ...
随机推荐
- 遍历进程活动链表（ActiveProcessLinks）、DKOM隐藏进程
1.EPROCESS结构体 EPROCESS块来表示.EPROCESS块中不仅包含了进程相关了很多信息,还有很多指向其他相关结构数据结构的指针.例如每一个进程里面都至少有一个ETHREAD块表示的线程 ...
- RDS MySQL 全文检索相关问题的处理
RDS MySQL 全文检索相关问题 1. RDS MySQL 对全文检索的支持 2. RDS MySQL 全文检索相关参数 3. RDS MySQL 全文检索中文支持 3.1 MyISAM 引擎表 ...
- nefu558 bfs
Description AC小公主很喜欢设计迷宫,她设计的迷宫只有两个口,一个入口,一个出口.但小公主有时候很调皮,她会让挑战者走不出迷宫.现在给你AC小公主的迷宫请你判断挑战者能否成功从出口走出迷宫 ...
- 《DSP using MATLAB》 示例Example4.1
今天开始看第4章,从开始看这本书到现在,过去一个多月,收获不少,继续坚持.
- DSP using MATLAB示例Example3.6
代码: n = [-5:5]; x = (-0.9).^n; % x(n) = k = -200:200; w = (pi/100)*k; % [0,pi] axis divided into 101 ...
- DSP using Matlab 书内练习Example 2.1
先上代码,后出结果图. a. n = [-5:5]; x=2*impseq(-2,-5,5) - impseq(4,-5,5); set(gcf,'Color',[1,1,1]) % 改变坐标外围背景 ...
- redis 存储session实现session共享
nginx 作为代理 tomcat集群 redis存储共享session nginx采用轮询方式将动态请求反向代理给tomcat,tomcat通过加载相应jar包方式实现获得redis中共享的sess ...
- PHP 设置代码执行时间
<?php ini_set('max_execution_time', '0'); set_time_limit(0); ?>
- Codeforces 682C Alyona and the Tree（树形DP）
题目大概说给一棵点有权.边也有权的树.一个结点v不高兴当且仅当存在一个其子树上的结点u,使得v到u路径上的边权和大于u的权值.现在要不断地删除叶子结点使得所有结点都高兴,问最少删几个叶子结点. 一开始 ...
- 【BZOJ1864】[Zjoi2006]三色二叉树 树形DP
1864: [Zjoi2006]三色二叉树 Description Input 仅有一行,不超过500000个字符,表示一个二叉树序列. Output 输出文件也只有一行,包含两个数,依次表示最多和最 ...