css显示出三角形
其实非常简单，就是设置一个div
让div的宽度和高度都设置为0，
然后为div设置一个border
因为角部位，比如我设置border-left和border-top
角部分是各自占用一半，
所以当我宽度和高度都为0时，不就是一个三角形吗。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<style type="text/css">
#s1{
margin:50px auto;
height:200px;
width:200px;
border-left:40px mediumpurple solid;
border-right:40px coral solid;
border-top:40px lightblue solid;
border-bottom:40px lightgreen solid;
}
#s2{
margin:50px auto;
height:0px;
width:0px;
border-left:40px mediumpurple solid;
border-right:40px coral solid;
border-top:40px lightblue solid;
border-bottom:40px lightgreen solid;
}
#s3{ margin:20px auto;
height:0;
width:0;
border-left:100px mediumpurple solid;
border-right:100px transparent solid;
border-top:100px transparent solid;
border-bottom:100px transparent solid;
cursor:pointer;
}
</style>
</head>
<body>
<div id="s1">
<div id="s2"></div>
</div>
<div id="s3"></div> </body>
</html>
代码很简单，不解释了，
效果图是這样的
css显示出三角形的更多相关文章
- 用css画出三角形
看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...
- 如何用css画出三角形
看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...
- 用css画出三角形【转】
看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...
- css 画出三角形
技术分享不一定行文累赘 这里说说最简洁的 css 画出三角形 display: inline-block; border: 10px dashed transparent; border-left: ...
- css写出三角形（兼容IE）
css写出三角形 利用css写三角形,兼容IE7 .arrow-up { width:0px; height:0px; border-left:10px solid transparent; bo ...
- CSS画出三角形（利用Border）
画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及颜色. 如果你将宽度调的足够大,改变不同方向的颜色,你就可以发现盒模型的border是四个梯形一样的线条. div{ width ...
- 用纯css写出三角形
1.新建一个元素,随便什么元素,不过我习惯性的会用块元素来做.如果行内元素就display:block它.<div class="triangle"></div& ...
- 利用css3特性写出三角形（兼容IE浏览器）
利用CSS写出三角形的效果 效果如图: 代码如下: .triangle-up { width:0px; height:0px; border-left:10px solid transparent; ...
- 用css画出对话框
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAa4AAAFSCAYAAACqpTv4AAAgAElEQVR4nO3deZBU5b3GcUIlVTG3bi
随机推荐
- C# 理解lock
本文为转载 .. 一. 为什么要lock,lock了什么? 当我们使用线程的时候,效率最高的方式当然是异步,即各个线程同时运行,其间不相互依赖和等待.但当不同的线程都需要访问某个资源的时候,就需要同步 ...
- 黄聪：异步加载JS的4种方式（详解）
方案1:$(document).ready <!DOCTYPE html> <html> <head> <script src="http://co ...
- MVC 安装
mvc 4 支持window xp,window 7,window 8, mvc 4 支持vs2010,vs2012 vs2012中包含mvc4; vs2010中需要安装mvc4 安装包:
- c# 存档修改 读取 写入
内涵图
- PLSQL_闪回操作5_Flashback Table
2014-12-09 Created By BaoXinjian
- DBA_Oracle Erp升级时如何确定具体的Patch ID（案例）
2014-07-03 Created By BaoXinjian
- java浮点型比较大小
======1 java浮点型比较大小 Float.parseFloat(String)和Float.valueOf(String).floatValue()的区别 Float.parseFloa ...
- 金蝶BOS
1, 金蝶BOS 金蝶BOS是一个开放的集成与应用平台,是金蝶企业管理软件解决方案.合作伙伴解决方案以及客户定制应用的技术平台.能够为企业灵活而迅速的设计.构建.实施和执行一套随需应变的企业管理软件系 ...
- GC之三--GC 触发Full GC执行的情况及应对策略
1.System.gc()方法的调用 此方法的调用是建议JVM进行Full GC,虽然只是建议而非一定,但很多情况下它会触发 Full GC,从而增加Full GC的频率,也即增加了间歇性停顿的次数. ...
- VisualStudio使用小技巧——快捷键（转）
1. 怎样调整代码排版的格式?选择:编辑—>高级—>设置文档的格式或编辑—>高级—>设置选中代码的格式.格式化cs代码:Ctrl+k+f 格式化aspx代码:Ctrl+k+d2 ...