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时,四个角边框交界重 ...
随机推荐
- java学习笔记（2）：获取文件名和自定义文件过滤器
//自定义文件过滤器import java.io.File; import javax.swing.filechooser.*; public class JavaChooser extends Fi ...
- 用ajax和js怎么做出滚动条滚到最下面分页
获取滚动条位置(scrollTop) 获取可视窗口高度(viewportHeight) 获取整个页面可滚动高度(scrollHeight) 当scrollTop+viewportHeight==scr ...
- error: bad symbolic reference. A signature in HiveContext.class refers to term hive
在spark-shell中执行val sqlContext = new org.apache.spark.sql.hive.HiveContext(sc)报错: error: bad symbolic ...
- STL中容器的push()或者push_back()函数的一点说明
在STL的queue 或者 vector.list等容器适配器或者容器中,会经常用到的函数就是push()或者push_back()函数,但是有一点需要明确的是: 在使用这些函数对容器/适配器对象增加 ...
- 廖雪峰js教程笔记 2
arguments JavaScript还有一个免费赠送的关键字arguments,它只在函数内部起作用,并且永远指向当前函数的调用者传入的所有参数.arguments类似Array但它不是一个Arr ...
- Angular JS 学习之控制器
1.AngularJS控制器 控制AngularJS的应用程序的数据:AngularJS控制器是常规的javaScript对象: 2.AngularJS应用程序被控制器控制,ng-controller ...
- 试听笔记：技术狂人nodejs
nodejs概念: 让javascript运行在服务端的开发平台.不是一种语言,不是框架,不是库.特点:单线程异步.事件驱动. PHP.JAVA既是语言也是平台. 创始人:Ryan nodejs cm ...
- zookeeper启动错误 transaction type: 2 error: KeeperErrorCode = NoNode for /hbase
hbase伪分布式,与zookeeper同一台机器的时候,运行一段时间,启动zookeeper的时候,日志中有如下错误,导致无法启动zookeeper java.io.IOException: Fai ...
- linux建立ssh信任关系
一.建立SSH信任将A主机做为客户端(发起SSH请求 ip:192.168.200.170)将B主机作为服务器端(接收ssh请求 ip:192.168.200.149)以上以主动发起SSH登录请求 ...
- Unity正式发布首个“实验性”VR编辑器，支持HTC Vive和Oculus Rift
Unity今天正式推出"实验性"VR编辑器.据悉,EditorVR是Unity游戏引擎中的一个组件,可让开发者在虚拟现实环境中开发游戏.为何要称之为"实验性"? ...