抄于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. MySQL使用正则表达式比较字段中的数字

    今天遇到一个问题,需要对表中的一个类json字段的内容进行筛选,而筛选的条件是值要大于某个值.因为值的位数并不确定,考虑使用正则表达式进行筛选. 字段格式 类json的key-value字段,示例如下 ...

  2. [转] LBYL与EAFP两种防御性编程风格

    检查数据可以让程序更健壮,用术语来说就是防御性编程.检查数据的时候,有这样的两种不同的风格.LBYL:Look Before You Leap  EAFP:Easier to Ask Forgiven ...

  3. 前台给后台传JSON字符串，后台解析并保存

    前台 function BMSure() { var DanWeiName = $("[id$='BusinessName']").val(); var Address = $(& ...

  4. ipython安装

    sudo pip install jupyter 然后用jupyter notebook来运行

  5. DrawableLayout

    提供一个在窗口顶层显示,可从窗口边缘拖出的container组件. DrawableLayout本身作为整个容器,先进行默认显示内容的布局,再进行拖出菜单的内容布局.也就是一个DL包含两个或三个子控件 ...

  6. linux按键驱动之poll

    上一节应用程序的死循环里的读函数是一直在读的:在实际的应用场所里,有没有那么一种情况,偶尔有数据.偶尔没有数据,答案当然是有的.-->poll机制:Poll机制实现的是一定时间如果没有按键的话就 ...

  7. window.onload用法详解:

    网页中的javaScript脚本代码往往需要在文档加载完成后才能够去执行,否则可能导致无法获取对象的情况,为了避免这种情况的发生,可以使用以下两种方式: 一.将脚本代码放在网页的底端,这样在运行脚本代 ...

  8. Linear Algebra lecture10 note

    Four fundamental subspaces( for matrix A)   if A is m by n matrix: Column space  C(A) in Rm (列空间在m维实 ...

  9. ubuntu 安装mongodb

    安装 mongodb sudo apt-get install mongodb 创建目录(放在单独文件夹中) mkdir data/aa 在目录外面启动,端口为27017 mongod -dbpath ...

  10. ASP.NET Razor - C# 循环和数组

    语句在循环中会被重复执行. For 循环 如果您需要重复执行相同的语句,您可以设定一个循环. 如果您知道要循环的次数,您可以使用 for 循环.这种类型的循环在向上计数或向下计数时特别有用: 实例 & ...