抄于http://dongtianee.sinaapp.com/demo9.html

/****************************************************************************************/

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>CSS绘制三角形和小房子</title>

    <style>
        body {
            background: #eee;
            font: normal normal 16px/1.5 "微软雅黑", sans-serif;
        }

        .main {
            max-width: 1000px;
            background: #fff;
            padding: 30px 10px;
            margin: auto;
            position: relative;
            box-shadow: 2px 2px 10px 5px #555;
        }

        .title {
            border-bottom: 1px dotted #3399ff;
            padding-bottom: 5px;
            margin-bottom: 15px;
        }

        .footer {
            margin-top: 20px;
            border-top: 1px solid #a5a5a5;
            padding: 10px;
            text-align: center;
        }
    </style>

    <!--CSS——begin——-->
    <style>
        .down {
            display: inline-block;
            width: 0;
            height: 0;
            border-top: 10px solid #000;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
        }

        .down1 {
            display: inline-block;
            width: 0;
            height: 0;
            border-left: 10px solid #000;
            border-top: 10px solid transparent;
            border-bottom: 10px solid transparent;
        }

        .down2 {
            display: inline-block;
            width: 0;
            height: 0;
            border-bottom: 10px solid #000;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
        }

        .down3 {
            display: inline-block;
            width: 0;
            height: 0;
            border-right: 10px solid #000;
            border-top: 10px solid transparent;
            border-bottom: 10px solid transparent;
        }

        .icon-home {
            width: 40px;
            height: 40px;
            display: block;
            position: relative
        }

        .icon-home:before {
            content: '';
            height: 0px;
            width: 0px;
            display: block;
            position: absolute;
            top: 0px;
            left: 0px;
            border: 20px solid transparent;
            border-bottom-color: #333;
            border-top: 0
        }

        .icon-home:after {
            content: '';
            height: 12px;
            width: 12px;
            display: block;
            position: absolute;
            top: 18px;
            left: 6px;
            border: 8px #333 solid;
            border-top-width: 10px;
            border-bottom: 0;
        }
    </style>
    <!--CSS——end——-->
</head>
<body>
<div class="main">
    <div class="title">&lt;&lt;<a href="index.html">查看全部Demo</a></div>
    <h1>CSS绘制三角形和小房子</h1>

    <p>利用border模拟三角形</p>

    <div>
        <span class="down"></span>
        <span class="down1"></span>
        <span class="down2"></span>
        <span class="down3"></span>
    </div>
    <p>使用css绘制小房子图案</p>
    <span class="icon-home"></span>

</div>
</body>
</html>

css 画基本图形的更多相关文章

  1. 用CSS画基本图形

    用CSS画基本图形 1.正方形 代码如下: #square { width: 100px; height: 100px; background: red; } 2.长方形 代码如下:   #recta ...

  2. CSS学习笔记二：css 画立体图形

    继上一次学了如何去运用css画平面图形,这一次学如何去画正方体,从2D向着3D学习,虽然有点满,但总是一个过程,一点一点积累,然后记录起来. Transfrom3D 在这一次中运用到了一下几种属性: ...

  3. css绘制特殊图形，meida查询，display inline-box间隙问题以及calc(）函数

    本文同时发表于本人个人网站 www.yaoxiaowen.com 距离上一篇文章已经一个月了,相比于写代码,发现写文章的确是更需要坚持的事情.言归正传,梳理一下这一个月来,在写ife任务时,有必要记录 ...

  4. css绘制特殊图形，meida查询，display inline-box间隙问题以及calc()函数

    本文同时发表于本人个人网站 www.yaoxiaowen.com 距离上一篇文章已经一个月了,相比于写代码,发现写文章的确是更需要坚持的事情.言归正传,梳理一下这一个月来,在写ife任务时,有必要记录 ...

  5. CSS之纯CSS画的基本图形（矩形、圆形、三角形、多边形、爱心、八卦等）

    图形包括基本的矩形.圆形.椭圆.三角形.多边形,也包括稍微复杂一点的爱心.钻石.阴阳八卦等.当然有一些需要用到CSS3的属性,所以在你打开这篇文章的时候,我希望你用的是firefox或者chrome, ...

  6. 纯CSS画的基本图形

    图形包括基本的矩形.圆形.椭圆.三角形.多边形,也包括稍微复杂一点的爱心.钻石.阴阳八卦等.当然有一些需要用到CSS3的属性,所以在你打开这篇文章的时候,我希望你用的是firefox或者chrome, ...

  7. 用css画出三角形

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

  8. 用css画图标

    css3的属性 transform(转换) 用途很广泛,功能也很强大,为了熟悉它的各种转换方式(平移 translate,旋转 rotate,扭曲 skew,放缩 scale),我做了一些平常常用的一 ...

  9. 如何用css画出三角形

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

随机推荐

  1. html页面元素事件丢失

    前段时间做网站包括最近用mvc做oa都发现这个奇怪现象,就是页面加载完毕后页面元素事件(比如按钮点击.复选框change)一切正常,但是当执行查询或者其他操作后页面事件丢失.具体原因暂没有时间分析,现 ...

  2. Android——通讯录

    <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo ...

  3. 关于javascript中闭包的理解

    闭包就是能够读取其他函数内部变量的函数. 在javascript中,只有函数内部的子函数可以读取局部变量,因此,我理解闭包就是定义在一个函数内部的函数. 例子: var f1 = function() ...

  4. 面试题五 数组中出现次数超过一半的数字 时间为O(n)

    也就是说 该数字出现的次数比其他所有数字出现次数的和还要多. 因此可以保存两个值,一个数字,一个次数. 遍历时 1.如果数字相同,count++ 2.如果count == 0 count = 1 nu ...

  5. Spring源码学习之： 通过Spring @PostConstruct 和 @PreDestroy 方法 实现初始化和销毁bean之前进行的操作

    关于在spring  容器初始化 bean 和销毁前所做的操作定义方式有三种: 第一种:通过@PostConstruct 和 @PreDestroy 方法 实现初始化和销毁bean之前进行的操作 第二 ...

  6. JSBinding / Testing

    Unity version compatibilities 5.3.5 5.2.0 5.1.5 5.0.4 4.7.2 4.7.0 4.6.9 4.6.0 4.5.5 Platform compati ...

  7. 支付宝接入文档中TRADE_SUCCESS和TRADE_FINISHED的本质区别

    之前一直不知道这2种状态到底有什么不同.支付宝中担保交易和即时到账交易对其的描述为: TRADE_SUCCESS  交易成功(或支付成功) TRADE_FINISHED    交易完成 一头雾水... ...

  8. Three.js开发指南---使用构建three.js的基本组件（第二章）

    .gui本章的主要内容 1 场景中使用哪些组件 2 几何图形和材质如何关联 3 正投影相机和透视相机的区别 一,Three所需要的基本元素 场景scene:一个容器,用来保存并跟踪所有我们想渲染的物体 ...

  9. 在Win8中用批处理创建Oracle数据库时报“Unable to open file”

    这一问题的原因是在运行批处理时使用了“以管理员权限运行”.如果直接双击运行是没有问题的. 如果我就想用管理员权限运行呢? 出这个错误的原因是,以管理员权限运行时的当前目录不是批处理所在的目录了.所以, ...

  10. angular2开发01

    // */ // ]]> angular2开发01 1. angular2 开发准备 1.1. 安装node 1.2. 安装npm 1.3. 运行qickStart 1 angular2 开发准 ...