其实非常简单，就是设置一个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. 更改AD查询LDAP条目的1000限制

    解除LDAP导入时的AD条目查询限制 解除LDAP导入或读取AD用户数限制问题 更改AD查询LDAP条目的1000限制 来源:http://www.jiancool.com/article/55373 ...

  2. class对象不太明白(待解答)

    如下:定义了一个Servletcontext的Listener,希望获取当前WEB应用的某一个文件对应的输入流 不懂为什么要这样获取?不是可以直接用servletContext.getResource ...

  3. TextBox仿Foxmail收件人删除效果

    场景: 发邮件,添加收件人后,删除时直接删除整个收件人. 添加事件: 文本框实现,需要添加以下4个事件: txtQsdw_TextChanged txtQsdw_MouseDown txtQsdw_M ...

  4. 个人卡付款sql

    select arap_djfb.billdate as 单据日期, bd_corp.unitname as 付款单位, arap_djfb.zy as 付款摘要, bd_cubasdoc.custc ...

  5. JavaScript中回调函数的使用

    在JavaScript中,回调函数具体的定义为:函数A作为参数(函数引用)传递到另一个函数B中,并且这个函数B执行函数A.我们就说函数A叫做回调函数.如果没有名称(函数表达式),就叫做匿名回调函数. ...

  6. 黄聪：C#超级延时方法，延迟系统时间但系统又能同时能执行其它任务

    private void Delay(int Millisecond) //延迟系统时间,但系统又能同时能执行其它任务: { DateTime current = DateTime.Now; whil ...

  7. iphone dev 入门实例4:CoreData入门

    The iPhone Core Data Example Application The application developed in this chapter will take the for ...

  8. 用aauto做游戏修改器

    import win.ui; import process; //以下自动生成,不用看. /*DSG{{*/ ;bottom=) winform.add( button={cls=;top=;righ ...

  9. JavaScript正则详谈

    JavaScript RegExp 基础详谈   前言: 正则对于一个码农来说是最基础的了,而且在博客园中,发表关于讲解正则表达式的技术文章,更是数不胜数,各有各的优点,但是就是这种很基础的东西,如果 ...

  10. Scala第二章学习笔记

    最基本的练习~: 使用伴生对象: object holder{ class Foo{ private var x = 5} object Foo{def im_in_yr_foo(f: Foo) = ...