<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>五角星</title>
    <style>
        #star-five {
            margin: 50px;
            position: relative;
            display: block;
            color: red;
            width: 0;
            height: 0;
            border-right:  100px solid transparent;
            border-bottom: 70px  solid red;
            border-left:   100px solid transparent;
            /*-moz-transform:    rotate(35deg);*/
            /*-webkit-transform: rotate(35deg);*/
            /*-ms-transform:     rotate(35deg);*/
            /*-o-transform:      rotate(35deg);*/
            transform: rotate(35deg);
        }
        #star-five:before {
            border-bottom: 80px solid red;
            border-left: 30px solid transparent;
            border-right: 30px solid transparent;
            position: absolute;
            height: 0;
            width: 0;
            top: -45px;
            left: -65px;
            display: block;
/*下面这条代码是必须的，表示在#star-five盒子之前插入一个非空的盒子*/
            content: '';
            -webkit-transform: rotate(-35deg);
            -moz-transform:    rotate(-35deg);
            -ms-transform:     rotate(-35deg);
            -o-transform:      rotate(-35deg);

        }
        #star-five:after {
            position: absolute;
            display: block;
            color: red;
            top: 3px;
            left: -105px;
            width: 0;
            height: 0;
            border-right: 100px solid transparent;
            border-bottom: 70px solid red;
            border-left: 100px solid transparent;
            -webkit-transform: rotate(-70deg);
            -moz-transform:    rotate(-70deg);
            -ms-transform:     rotate(-70deg);
            -o-transform:      rotate(-70deg);
            content: '';
        }

    </style>
</head>
<body>
<div id="star-five"></div>
</body>
</html>

用CSS画五角星的更多相关文章

  1. 用css画图标

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

  2. CSS学习笔记一：css 画平面图形

    最近在学习CSS,先从CSS画点平面图形入手,发现除了正方形.长方形此类比较简单,只要有长宽设置恰当即可,画圆要涉及radius,然后恢复到做界面的最讨厌的状态了,不断的修改设值,调整数据,所幸并不多 ...

  3. 用CSS画基本图形

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

  4. 一步一步教你用CSS画爱心

    今天小颖给大家分享一个用CSS画的爱心,底下有代码和制作过程,希望对大家有所帮助. 第一步: 先画一个正方形.如图: <!DOCTYPE html> <html> <he ...

  5. 参考bootstrap中的popover.js的css画消息弹框

    前段时间小颖的大学同学给小颖发了一张截图,图片类似下面这张图: 小颖当时大概的给她说了下,其实小颖也不知道上面那个三角形怎么画嘻嘻,给她说了DOM结构,具体的css让她自己百度,今天小颖自己参考boo ...

  6. Effective前端3：用CSS画一个三角形

    p { text-indent: 2em } .triangle-container p { text-indent: 0 } img { margin: 15px 0 } 三角形的场景很常见,打开一 ...

  7. 用css画出三角形

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

  8. 用纯css画个三角形

    用纯css画个三角形以下是源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  9. 如何用css画出三角形

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

随机推荐

  1. C#图像处理（2）：给图片加白边

    C#图片处理给图片添加白边: /// <summary> /// 在图片上方加入白边 /// </summary> /// <param name="Img&q ...

  2. C#属性和readonly类型

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  3. 学习CAS实现SSO单点登录

    学习CAS实现SSO单点登录 网上找了几篇比较详细的教程,在这记录一下: 原理: CAS实现SSO单点登录原理 教程: 1.CAS实现单点登录(SSO)经典完整教程 2.SSO之CAS单点登录实例演示 ...

  4. hdu 2143 数组合并 二分

    Can you find it? Time Limit: 10000/3000 MS (Java/Others)    Memory Limit: 32768/10000 K (Java/Others ...

  5. mysql 8小时空闲后连接失效的解决

    查了一下发现应用程序和mysql数据库建立连接,如果超过8小时应用程序不去访问数据库,数据库就断掉连接 .这时再次访问就会抛出异常. 关于mysql自动断开的问题研究结果如下, 1.c3p0.Hika ...

  6. JSON.stringify 语法实例讲解　字符串

    语法: JSON.stringify(value [, replacer] [, space]) var student = new Object(); student.name = "La ...

  7. WDCP LNMPA和LNMP 504 Gateway time-out错误的解决方法

    Nginx的特点是处理静态很给力,Apache的特点是处理动态很稳定,两者结合起来便是LNMPA,nginx处理前端,apache处理后端,这样处理静态会很快,处理动态会很稳定.当我以为安装完成以后便 ...

  8. windows下给用非exe格式的文件安装网卡驱动

    之前我只知道用驱动精灵来给新机器装网卡驱动,或者用下载好的exe格式文件给非新机器装网卡驱动. 今天下载了一个非exe格式的文件,就不知道怎么装了,百度了一下才知道,可以通过:”设备管理器“-> ...

  9. c# 高效分页只需一个dll实例

    第一.首先下载WebUIControl.dll http://pan.baidu.com/s/1gdkilDh 第二.添加引用 三.应用实例-前台代码 <%@ Register Assembly ...

  10. INI文件格式

    最近在看git命令,遇到INI文件格式,上网查了一下,把它总结一下: 程序没有任何配置文件,那么它对外是全封闭的,一旦程序需要修改一些参数必须要修改程序代码本身并重新编译,为了让程序出厂后还能根据需要 ...