其实非常简单，就是设置一个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显示出三角形的更多相关文章

  1. 用css画出三角形

    看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...

  2. 如何用css画出三角形

    看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...

  3. 用css画出三角形【转】

    看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...

  4. css 画出三角形

    技术分享不一定行文累赘 这里说说最简洁的 css 画出三角形 display: inline-block; border: 10px dashed transparent; border-left: ...

  5. css写出三角形（兼容IE）

    css写出三角形   利用css写三角形,兼容IE7 .arrow-up { width:0px; height:0px; border-left:10px solid transparent; bo ...

  6. CSS画出三角形（利用Border）

    画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及颜色. 如果你将宽度调的足够大,改变不同方向的颜色,你就可以发现盒模型的border是四个梯形一样的线条. div{ width ...

  7. 用纯css写出三角形

    1.新建一个元素,随便什么元素,不过我习惯性的会用块元素来做.如果行内元素就display:block它.<div class="triangle"></div& ...

  8. 利用css3特性写出三角形（兼容IE浏览器）

    利用CSS写出三角形的效果 效果如图: 代码如下: .triangle-up { width:0px; height:0px; border-left:10px solid transparent; ...

  9. 用css画出对话框

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAa4AAAFSCAYAAACqpTv4AAAgAElEQVR4nO3deZBU5b3GcUIlVTG3bi

随机推荐

  1. "unresolved external symbol __imp__WSACleanup@0"

    编译时出现这种问题怎么解决:"unresolved external symbol __imp__WSACleanup@0"出现此类问题一般是ws2_32.lib这个lib没有li ...

  2. ［linux basic 基础］----同步信号量

    直接使用一个共享变量,来是两个线程之间进行切换是非常笨拙而且没有效率的:信号量--互斥量--这两者是相互通过对方来实现的:比如,如果想控制某一时刻只有一个线程可以访问一些共享内存,使用互斥量要自然一些 ...

  3. eclipse 中的注释 快捷键-添加/* */注释-Ctrl+Shift+/

    (4)Ctrl+Shift+/ 说明:添加/* */注释 (5)Ctrl+Shift+\ 说明:消除/* */注释 更多:http://blog.csdn.net/wjeson/article/det ...

  4. hdu 3068 最长回文 manacher算法（视频）

    感悟: 首先我要Orz一下qsc,我在网上很难找到关于acm的教学视频,但偶然发现了这个,感觉做的很好,链接:戳戳戳 感觉这种花费自己时间去教别人的人真的很伟大. manacher算法把所有的回文都变 ...

  5. C#(结构体_枚举类型）

        结构体一般定义在Main函数上面,位于Class下面,作为一个类:一般情况Struct定义在Main函数前面,Main函数里面的地方都可以使用,参数前面加上public代表公用变量. 用法 1 ...

  6. ylbtech-Unitity-CS:Indexers

    ylbtech-Unitity-CS:Indexers 1.A,效果图返回顶部   1.B,源代码返回顶部 1.B.1, // indexer.cs // 参数:indexer.txt using S ...

  7. JDBC常用代码

    try { //加载驱动 Class.forName("com.mysql.jdbc.Driver"); String url="jdbc:mysql://127.0.0 ...

  8. EF下CodeFirst、DBFirst与ModelFirst分析

    EF4.1有三种方式来进行数据操作及持久化.分别是Database-First,Model-First,Code-first:1.Database First是基于已存在的数据库,利用某些工具(如Vs ...

  9. [ActionScript 3.0] AS3 获取函数参数个数

    function createFunction(param1:String,param2:String,param3:int=0):void { trace(arguments.length);//a ...

  10. Python中为什么推荐使用isinstance来进行类型判断？而不是type

    转自:http://www.xinxingzhao.com/blog/2016/05/23/python-type-vs-isinstance.html Python在定义变量的时候不用指明具体的的类 ...