其实非常简单，就是设置一个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. ros的相关link

    http://markzhang.cn/blog/2014/08/19/ros-basic-setup/ http://blog.csdn.net/boliang319/article/details ...

  2. python学习-day01

    一.python介绍: python是一种面向对象的解释型计算机程序设计语言,由荷兰人Guido van Rossum于1989年发明,第一个公开发行版发行于1991年. Python语法简洁清晰,特 ...

  3. Linux下nl命令的用法详解

    Linux中nl命令和cat命令很像,不过nl命令会打上行号,属于比较不常用的命令,下面随小编一起来了解下这个鲜为人知的nl命令吧. nl命令在linux系统中用来计算文件中行号.nl 可以将输出的文 ...

  4. python 读取sqlite3 数据库

    import sqlite3 name = "tom" age = 30 con = sqlite3.connect("d:\\test.db") cur = ...

  5. javaweb工程，Servlet里面获取当前WEB跟路径的文件绝对路径地址

    String base_Url = request.getSession().getServletContext().getRealPath("/"); String window ...

  6. 键盘--android 隐藏系统键盘

    . -----------------------------------------已验证----------------------------------- public static void ...

  7. C语言中，数组名作为参数传递给函数时，退化为指针

    C语言中,数组名作为参数传递给函数时,退化为指针   C语言中,数组名作为参数传递给函数时,退化为指针:需要数组大小时, 需要一个参数传数组名,另一个传数组大小. 数组名做函数参数时,就相当于指针了. ...

  8. UCOS-信号标志组（学习笔记）

    信号标志组即根据各任务的信号进行逻辑运算,根据逻辑运算的结果决定是否进行.发送方指定向那个标志组的哪一位(响应位等于1表明向哪一位发)发1还是0.等待逻辑结果的任务指定等待那个标志组的哪几位.这几位按 ...

  9. php启动时候提示PHP startup的解决方法

    最近在学习php,配置好php环境后,每次开机都有警告提示说 PHP startup.如下图: 显然这是个小问题,是关于php配置的. 解决这个问题很简单只需要在php.ini 文件中修改 exten ...

  10. RadASM中文乱码问题解决方法！！

    RadASM版本:2.2.2.0 在这个版本的RadASM代码编辑器里面,如果输入中文,则会乱码,经过一些尝试后,终于解决了这个问题,通过修改RadASM的字体设置就可以了!! 修改字体说明:通过本人 ...