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：Java复合赋值表达式的小问题
问题:i += j只是i = i + j的简写么? 答案:非也!看下面的程序: int i = 5; long j = 8; i += j; // 可以通过编译且结果正确 i = i + j; // ...
- C#部分的总结
经过本次考试暴露出一些问题,面对一些概念性和文字性的基础知识,仍然不够细心,出现各种不应该的错误, 虽然平时学习中,实际操作写代码比较顺利,但基础知识和概念仍不可少,这在将来面试上也是重要的一部分.在 ...
- Streaming data from Oracle using Oracle GoldenGate and Kafka Connect
This is a guest blog from Robin Moffatt. Robin Moffatt is Head of R&D (Europe) at Rittman Mead, ...
- android常用对话框封装
在android开发中,经常会用到对话框跟用户进行交互,方便用户可操作性:接下来就对常用对话框进行简单封装,避免在项目中出现冗余代码,加重后期项目的维护量:代码如有问题欢迎大家拍砖指正一起进步. 先贴 ...
- js-js实现,在HTML中使用JavaScript,基本概念
Js实现: 1.JavaScript实现的组成: 核心(ECMAScript):由ECMA-262定义,提供核心语言功能 文档对象模型(DOM)提供访问和操作网页内容的方法以及接口 浏览器对象模型(B ...
- EntityFramework Code First 手写代码实现生成数据库
第一步:写实体类 第二步:写一个实体操作类,此类必须继承Dbcontext,此处的属性,将会在初始化时(第一次作,增,删,改的时候),生成相应的表. 第三步:运行程序,会自动建表 注意: 若实体类发生 ...
- jQuery下操作dropdownlist
dropdownlist呈现到html中如下: <select id="ddlOrg" name="ddlOrg"> <option ...
- set+几何 LA 5908 Tracking RFIDs
题目传送门 题意:给一些传感器,范围在r内,再给一些询问点,问这些点能有几个传感器收到,当有墙隔绝时信号减弱,范围变小 分析:set存储传感器,用set的find来查找是否是传感器.因为询问点少,可以 ...
- spring mvc 入门配置
1. 把所需jar拷贝到工程目录下WEB-INF/lib 2. 配置WEB.xml,配置前端控制器 org.springframework.web.servlet.DispatcherServlet ...
- LA4671 K-neighbor substrings（FFT + 字符串Hash）
题目 Source http://acm.hust.edu.cn/vjudge/problem/19225 Description The Hamming distance between two s ...