抄于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. 集成ShareSDK，分享成功后QQ和空间回调不执行的可能原因

    AndroidMainifest.xml中的如箭头所示的id与assets下ShareSDK.xml中配置的QQ的AppId一定要相同.

  2. C(++) Websocket消息推送---GoEasy

    Goeasy, 它是一款第三方推送服务平台,使用它的API可以轻松搞定实时推送!个人感觉goeasy推送更稳定,推送 速度快,代码简单易懂上手快 浏览器兼容性:GoEasy推送 支持websocket ...

  3. css中的大小、定位、轮廓相关属性

    css中的大小.定位.轮廓相关属性 1.通过height.width属性控制组件大小 height:高度,可以设置任何有效的距离值: width:宽度,可以设置任何有效的属性值: max-height ...

  4. codeforces Expecting Trouble

    link:http://codeforces.com/contest/345/problem/A 写完这道题目才发现这场比赛只能用Ada语言提交== 好吧,逗我玩呢 考的是数学期望公式,二项分布的期望 ...

  5. C# 实现软件的重启

    有些时候我们想用户在设置完之后使程序重新启动生效,这时候我们只需要简单的应用一下代码即可: if (MessageBox.Show("设置保存成功,下次启动时生效,是否马上重启软件?&quo ...

  6. 利用html5的localStorage做一个备忘录

    实现一个便签功能,可以记录内容和写的时间,当网页从新载入,可以读取以前的记录. html文档 <!DOCTYPE html> <html> <head lang=&quo ...

  7. Web性能测试的简介

    一.术语 1.并发用户:并发一般分两种.1)严格意义上的并发,即所有的用户在同一时刻做同一件事情或操作,这种操作一般指做同一类型的业务:2)广义范围的并发,与前者主要区别,尽管多个用户对系统发出了请求 ...

  8. css z-index属性使用过程中遇到的问题

    z-index属性在web开发中会经常使用,其主要的作用简单的说就是把元素的position设置为absolute.fixed之后,可以调节元素在文档上的层级关系.比如经常见到的dialog,mask ...

  9. jsr133

    1:介绍 java虚拟机支持多线程运行.线程代表的就是Thread class.对用户来说创建线程的唯一办法就是创建一个Thread对象:每一个线程都和一个Thread对象关联.Thread对象调用s ...

  10. kafka单节点测试

    ======================命令====================== 启动zookeeper server bin/zookeeper-server-start.sh conf ...