其实非常简单，就是设置一个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. [cmd]linux 常用命令

    1. 磁盘/文件大小中占用情况 df -h: 磁盘大小占用情况 du -h file: 文件夹大小,du -ah file文件夹内所有文件占用情况 du -sh dir: 可以查看文件夹大小,而不列出 ...

  2. C#将字符串转换为整型的三种方法的总结

    在C#中,要将一个字符串或浮点数转换为整数,基本上有三种方法: (1)使用强制类型转换:(int)浮点数 (2)使用Convert.ToInt32(string) (3)使用int.Parse(str ...

  3. Mysql存储过程简明使用

    mysql> \d //  改变命令行下的结束符标志mysql> create procedure p3() -> begin -> set @i=1;  # 这样也可以定义变 ...

  4. IntentService简介

    参照文章:http://android.tgbus.com/Android/tutorial/201106/355229.shtml IntentService是Service类的子类,用来处理异步请 ...

  5. (C#) 多线程修改布尔值， volatile

    参考: https://msdn.microsoft.com/en-us/library/x13ttww7(VS.80).aspx http://stackoverflow.com/questions ...

  6. php 设置一个函数的最大运行时间

    如何防止一个函数执行时间过长呢?在PHP里可以用pcntl时钟信号+异常来实现 declare(ticks = 1); function a() { sleep(10); echo "a f ...

  7. 加密---公钥&密钥

    一直以来对公钥和私钥都理解得不是很透彻,感觉到模棱两可.今天在网上找了半天,通过查看对这个密钥对的理解,总算弄清楚了.      公钥和私钥就是俗称的不对称加密方式,是从以前的对称加密(使用用户名与密 ...

  8. 帝国cms常用变量总结

    一.常用变量 当前栏目ID $GLOBALS['navclassid'] 当前父栏目ID $class_r[$cid]['bclassid'] 栏目路径 $class_r[栏目ID]['classpa ...

  9. 表单“X”标记识别

    表单元数字列旁边的一列标有X字样的为待识别的.要求输出带有叉标记的对应数字列: 主要方法: 1:图像预处理 灰度化--二值化. 2:图像分割 投影法,根据图像特点,找出X标记所在列. 3:X标记单元定 ...

  10. CSS从大图中抠取小图完整教程(background-position应用)

    CSS从大图中抠取小图完整教程(background-position应用)  转自: http://www.cnblogs.com/iyangyuan/archive/2013/06/01/3111 ...