抄于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. 自适应布局，响应式布局以及rem,em区别

    一.自适应和响应式 先说共同点: 两者都是因为越来越多的 移动设备( mobile, tablet device )加入到互联网中来而出现的为移动设备提供更好的体验的技术.用技术来使网页适应从小到大( ...

  2. ThinkPHP BASE

      对于thinkphp 开源框架来说  是一个基于  模型/控制器/视图 的结构 V(View):视图接收来自用户操作的信息返回到 对应的控制器或方法 C (controller):控制器则调用 相 ...

  3. ASCII电脑编码

    Bin Dec Hex 缩写/字符 解释 0000 0000 0 00 NUL(null) 空字符 0000 0001 1 01 SOH(start of headline) 标题开始 0000 00 ...

  4. jsp中target="_blank"的用法

    对于点击查询按钮或a标签等,打开一个新页面并显示结果的做法如下: 1.form表单: 在form标签上加target="_blank"后,点击搜索按钮,显示查询结果时会打开一个新页 ...

  5. rpm 软件管理

    rpm包 安装,查询,卸载,升级,校验数据库的重建等工作 1.安装rpm -i /PATH/TO/PACKAGE_FILE -h: 以#显示进度:每个#表示2%;  -v: 显示详细过程 -vv: 更 ...

  6. CE STEPLDR

    作用:初始化CPU.内存.Flash,复制EBoot到内存并跳入EBoot中运行. 原理:S3C2416有 8-KB 的steppingstone(暂时翻译为垫脚石),在Nand启动模式下可把Nand ...

  7. STM32学习笔记——点亮LED

    STM32学习笔记——点亮LED 本人学习STM32是直接通过操作stm32的寄存器,使用的开发板是野火ISO-V2版本: 先简单的介绍一下stm32的GPIO: stm32的GPIO有多种模式: 1 ...

  8. 使用RXTX获取电脑串口

    RXTX是javacomm串口通信的一个扩展 RXTX开发所需文件的下载地址:http://rxtx.qbang.org/wiki/index.php/Download 解压之后可以看到支持各个平台的 ...

  9. Invert Binary Tree

    Invert a binary tree: 4 / \ 2 7 / \ / \ 1 3 6 9 to 4 / \ 7 2 / \ / \ 9 6 3 1 简单递归实现,调换左右子树,子树的所有子树结构 ...

  10. POJ 3666 Making the Grade

    Description A straight dirt road connects two fields on FJ's farm, but it changes elevation more tha ...