其实非常简单，就是设置一个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. 基于session的简易购物车引发的问题

    一.功能描述:  页面如下所示: 运行报错: java.io.FileNotFoundException: E:\apache-tomcat-8.0.37\work\Catalina\localhos ...

  2. ulipad 常用快捷键

    快捷键名称 对应功能 F1 (M)UliPad Help Document(帮助文档) F2 (M)Directory Browser(目录浏览)(3.1版新增) F3 (M)Find Next(查找 ...

  3. 黄聪：PHP使用Simple_HTML_DOM遍历、过滤及保留指定属性

    <? /* * 参考资料: * http://www.phpddt.com/manual/simplehtmldom_1_5/manual_api.htm * http://www.phpddt ...

  4. 部署与管理ZooKeeper(转)

    本文以ZooKeeper3.4.3版本的官方指南为基础:http://zookeeper.apache.org/doc/r3.4.3/zookeeperAdmin.html,补充一些作者运维实践中的要 ...

  5. spark MapOutputTrackerMaster

    最近用了一个RowNumber() over()函数 进行三张4000万数据的关联筛选,建表语句如下: create table CiCustomerPortrait2 as SELECT ROW_N ...

  6. cf 547B. Mike and Feet dp

    题意: n个矩阵排成一排,n<=2e5,高度分别为hei[i],宽度为1 对于一些连续的矩阵,矩阵的size为矩阵的个数,矩阵的strength为这些矩阵中高度最低的那一个高度 求:for ea ...

  7. 根据职位名，自动生成jd

    代码本身就是最好的解释,不赘述. 文本聚类输出: cluster.py #!/usr/bin/env python # coding=utf-8 import jieba,re from gensim ...

  8. git撤销命令

    1 撤销工作区中master的修改 git checkout -- master.txt ,用暂存去覆盖工作区 2 git clean -n 查看哪些文件会被移除3 git clean -f 强制删除 ...

  9. 修改Jenkins启动衍生进程的生命周期

    Jenkins+jmeter 多线程测试java接口时爆错,导致无法生成html报告. 先介绍下场景: 在Jenkins中新建了一个Job,假设你在一些列Build Step之前/之后,启动了一个进程 ...

  10. Ubuntu下tftp服务搭建

    1.安装软件包 sudo apt-get install tftpd tftp xinetd 2.建立配置文件 在/etc/xinetd.d/下建立一个配置文件tftp sudo vi /etc/xi ...