用css画出三角形【转】
看到有面试题里会有问到如何用css画出三角形
众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状
画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及颜色。
如果你将宽度调的足够大,改变不同方向的颜色,你就可以发现盒模型的border是四个梯形一样的线条。
这个时候如果将盒模型内部的height,width调为0px,则三角形就形成了。
1 border:100px solid transparent //边框100px,实线,透明颜色,下面三行代码等同于此句
2 border-width:15px; //border-width代表所有方向的border
3 border-style:solid;
4 border-color:transparent;
如果你看明白了原理那么现在你应该已经可以自己写出代码了。
1 width: 0;
2 height: 0;
3 border-left: 50px solid transparent; //左边宽度50px,实线,透明颜色
4 border-right: 50px solid transparent; //右边同上
5 border-top: 100px solid red; //上边宽度100px,实线,红色
上面这段代码可以生成一个向下的三角形。如下图所示(为便于理解我替换了右边的颜色)
由这个效果图我们可以看出,要生成一个三角形我们需要三条边框。
左右边框的高度会决定三角形的高有多长。
三角形高度则由边框自己的宽度决定
那么如何生成一个指向右下或者左下之类的这样的三角呢?
相信大家已经通过上面的图看出来了。
我们只需要两条边框就够了。
1 width: 0;
2 height: 0;
3 border-top: 100px solid red;
4 border-right: 100px solid transparent;
这段代码就会生成一个指向左下的三角形,底和高都是100px。
还记不记得border-width。
它可以用一句代码定义四条边框的宽度。
转载自:http://www.cnblogs.com/Aaxuan/p/6066316.html
用css画出三角形【转】的更多相关文章
- 用css画出三角形
看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...
- 如何用css画出三角形
看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...
- css 画出三角形
技术分享不一定行文累赘 这里说说最简洁的 css 画出三角形 display: inline-block; border: 10px dashed transparent; border-left: ...
- CSS画出三角形(利用Border)
画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及颜色. 如果你将宽度调的足够大,改变不同方向的颜色,你就可以发现盒模型的border是四个梯形一样的线条. div{ width ...
- 用纯css画个三角形
用纯css画个三角形以下是源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
- css写出三角形(兼容IE)
css写出三角形 利用css写三角形,兼容IE7 .arrow-up { width:0px; height:0px; border-left:10px solid transparent; bo ...
- 用HTML+CSS画出一个同心圆
参加web前端校招的同学们经常会遇到这样的面试题:用HTML+CSS画出一个同心圆. 例如: 这道题主要考验的是基础盒模型布局能力和倒圆角属性的巧用. 1.html代码 <body> &l ...
- CSS画一个三角形,CSS绘制空心三角形,CSS实现箭头
壹 ❀ 引 这两天因为项目工作较少,闲下来去看了GitHub上关于面试题日更收录的文章,毕竟明年有新的打算.在CSS收录中有一题是 用css创建一个三角形,并简述原理 .当然对于我来说画一个三角形是 ...
- Effective前端3:用CSS画一个三角形
p { text-indent: 2em } .triangle-container p { text-indent: 0 } img { margin: 15px 0 } 三角形的场景很常见,打开一 ...
随机推荐
- c++ 子类调用父类构造方法 调用父类方法 类声明与实现分离
Person.h #pragma once #include "stdafx.h" #include<iostream> class Person { private: ...
- BI 项目管理之角色和职责
DW/BI 系统在生命周期中需要许多不同的角色和技能,它们来自业务和技术领域.本文将介绍创建DW/BI 系统所涉及的主要角色.角色和人之间很少是一对一关系.与我们合作的团队小到只有一人,大 ...
- POJ3208 Apocalypse Someday(二分 数位DP)
数位DP加二分 //数位dp,dfs记忆化搜索 #include<iostream> #include<cstdio> #include<cstring> usin ...
- lucene/solr 修改评分规则方法总结
说明:由于solr底层使用的是lucene,因此修改solr打分机制归根结底还是依赖于lucene的打分机制,本文主要讨论lucene的打分机制. 本文说明lucene 常用的四种影响评分结果的方式. ...
- form表单中的submit点击时阻止提交
在form 中增加onsubmit="return false;"属性.
- Jenkins搭建
1.添加仓库: sudo wget -O /etc/yum.repos.d/jenkins.repo \ http://jenkins-ci.org/redhat/jenkins.repo sudo ...
- jQuery easyUI datagrid 增加求和统计行 分类: JavaScript 2015-01-14 17:46 2178人阅读 评论(0) 收藏
在datagrid的onLoadSuccess事件增加代码处理. <style type="text/css"> .subtotal { font-weight: bo ...
- 快速熟悉python 下使用mysql(MySQLdb)
首先你需要安装上mysql和MySQLdb模块(当然还有其他模块可以用),这里我就略过了,如果遇到问题自行百度(或者评论在下面我可以帮忙看看) 这里简单记录一下自己使用的学习过程: 一.连接数据库 M ...
- csc.rsp Invent by Microshaoft
# This file contains command-line options that the C# # command line compiler (CSC) will process as ...
- 【JavaScript】变量定义提升、this指针指向、运算符优先级、原型、继承、全局变量污染、对象属性及原型属性优先级
参考资料http://caibaojian.com/toutiao/5446 1.所有变量声明(var)或者声明函数都会被提升到当前函数顶部 关于函数表达式,js会将代码拆分为两行代码分别执行.这里需 ...