抄于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. linux curl 下载jdk

    进入orecle官网,找到需要的安装包 需要cookie同意相关协议才能下载 curl -L "http://download.oracle.com/otn-pub/java/jdk/8u1 ...

  2. SQL server2008-对象资源管理器

    对象资源管理器:数据库 .安全性.服务器对象.复制.管理 .SQL server代理 六部分组成

  3. 最新AFNetworking

    1.网络监测 /** * 网络检测 */ - (void)networkingMonitoring { //打开网络监测 [[AFNetworkReachabilityManager sharedMa ...

  4. 关于for、foreach、filter等的一些用法

    通常我们使用得最熟悉的是for循环. 比如对于一组数字的排大小,可以使用冒泡法. var a=[];     for(var d=0;d<5;d++){         var b=window ...

  5. Java注释

    注释:用于注解说明解释程序的文字.提高了代码的阅读性. 一:单行注释 "//注释文字" 二:多行注释 "/*注释文字*/" 三:文档格式 "/**注释 ...

  6. SHOI 2009 会场预约 平衡树 STL练习

    题目描述 PP大厦有一间空的礼堂,可以为企业或者单位提供会议场地.这些会议中的大多数都需要连续几天的时间(个别的可能只需要一天),不过场地只有一个,所以不同的会议的时间申请不能够冲突.也就是说,前一个 ...

  7. 基于jQuery的email suggest插件

    最近项目中有表单提交的地方需要用户填写邮箱,PM(产品经理)和运营都强烈要求在用户填写邮箱的时候出现suggest列表,简化用户输入的填写流程.我考虑了下,这个应该也是经常会用到的功能,细心的朋友可能 ...

  8. Win10下SQLServer2000的安装

    Win10的技术预览版已经发布近两个星期了,我也迫不及待地装上尝鲜,发现SQLServer2000在Win10上无法安装,在翻遍网上资料和经过无数次尝试后得到了一种安装方法,希望能够帮助遇到类似问题的 ...

  9. [课程设计]Scrum 1.2 Spring 计划&系统流程&DayOne燃尽图

    多鱼点餐系统WEB Spring 计划 ● 产品BACKLOG 多鱼点餐系统产品BACKLOG ID Name Imp Est How to demo Notes 1 设计框架结构 10 8 利用美学 ...

  10. Baidu set to lose leading role in digital advertising _china daily

    advertising: n,广告 Online search giant Baidu Inc is set to loset its top spot in the nation's booming ...