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时,四个角边框交界重 ...
随机推荐
- 智能车学习（十八）——电机学习
一.C车电机选择 1.摘要: 因为C车模在四轮车的优势是有两个电机,可以进行主动差速,劣势是电机太弱了....所以如何选择电机,就是个钱的问题了,电机多一点,就比较好选,但是C车电机跑多了就 ...
- SQL连接查询、变量、运算符、分支、循环语句
连接查询:通过连接运算符可以实现多个表查询.连接是关系数据库模型的主要特点,也是它区别于其它类型数据库管理系统的一个标志. 常用的两个链接运算符: 1.join on 2.union 在关系数据库 ...
- LR通过snmp监控linux下的mysql
LR通过snmp监控linux下的mysql 在linux底下安装配置snmp: 1.使用系统盘安装rpm包(这种方式最好) 2.在www.net-snmp.org处下载net-snmp安装(安装后有 ...
- SpringRMI解析3-RmiServiceExporter逻辑细节
在发布RMI服务的流程中,有几个步骤可能是我们比较关心的. 获取registry 由于底层的封装,获取Registry实例是非常简单的,只需要使用一个函数LocateRegistry.createRe ...
- DSP using Matlab 示例Example2.2
a. n = -2:10; x = [1:7,6:-1:1]; % generate x(n) [x11,n11] = sigshift(x,n,5); [x12,n12] = sigshift(x, ...
- MySql 的数据储存引擎
1.存储引擎是什么? Mysql中的数据用各种不同的技术存储在文件(或者内存)中.这些技术中的每一种技术都使用不同的存储机制.索引技巧.锁定水平并且最终提供广泛的不同的功能和能力.通过选择不同的技术, ...
- http://blog.csdn.net/hitmediaman/article/details/6636402
http://blog.csdn.net/hitmediaman/article/details/6636402
- webApi实践：开始WebApi 2
1.学习步骤总结 学习网址:http://www.asp.net/web-api/overview/getting-started-with-aspnet-web-api/tutorial-you ...
- 【NOI2011】道路修建 BFS
[NOI2011]道路修建 Description 在 W 星球上有 n 个国家.为了各自国家的经济发展,他们决定在各个国家之间建设双向道路使得国家之间连通.但是每个国家的国王都很吝啬,他们只愿意修建 ...
- NodeJS中 package.json 解析
package.json 中包含各种所需模块以及项目的配置信息(名称.版本.许可证等)meta 信息. 包含可配置项 name 名称 应用描述 description 版本号 version 应用的配 ...