<!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. 无法连接到ASP.NET Development Server 解决办法

    右击项目名称 ->  属性 -> Web -> 选特定端口 -> 输入一个端口值.

  2. 今天上传公司服务器出现的.net framework版本错误问题

    今天做好一个网站(.net4.0),里面有静态页面也有aspx页面,发布后,满心欢喜的上传到服务器,运行后,静态页没有问题,可是通过导航栏一旦点击进入aspx页面,就会出现错误 ,提示web.conf ...

  3. centos打开3306端口

    centos默认是关闭了3306端口的,外网通过3306端口不能访问数据库,这时需呀打开3306端口1.打开端口: /sbin/iptables -I INPUT -p tcp --dport 330 ...

  4. C# 参数按照ASCII码从小到大排序（字典序）

    在对接第三方支付的时候,第三方会要求参数按照ASCII码从小到大排序.如下: public static void requestPay() { Dictionary<string, strin ...

  5. volatile举列说明const

    1.即使本程序中虽然不改变这种类型的值,但别的比如中断程序可能会改变这个值,加上volatile,编译器不优化,每次都重新访问这个值做判断 2.如 unsigned char flag = 1; in ...

  6. MFC中函数名前加 :: 原因

    在开发MFC之前,开发的是以AFx(Application Frameworks,x是没有什么意义的)开头的一些函数.但是那个时候开发的函数并没有进行封装,但是有很多很有用的函数.最后AFx开发失败, ...

  7. Liqn基础

    Linq:语言集成查询 (LINQ) 是 Visual Studio 2008 中引入的一组功能,可为 C# 和 Visual Basic 语言语法提供强大的查询功能. LINQ 引入了标准易学的数据 ...

  8. Python批量修改文本文件内容

    Python批量替换文件内容,支持嵌套文件夹 import os path="./" for root,dirs,files in os.walk(path): for name ...

  9. select p.id, name,ROW_NUMBER() over(PARTITION by name order by p.id) names from person p

    select p.id, name,ROW_NUMBER() over(PARTITION  by name order by p.id) names from person p

  10. NFine常见错误

    1.新增数据录入录入不进去提示:An error occurred while updating the entries.See the inner exception for details. 这样 ...