<!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. .net framework版本以及服务器部署问题

    自己做了个官网,部署到服务器很多问题,发现targetframework为4.0,但是公司服务器的版本为:2.0.50727,但是公司一个项目用的lambda和linq就没有事,发现这个是3.5支持的 ...

  2. 如何安装windows7系统

      在XP时代,光驱对于我们而言仅仅是装系统用,不过在Win7发布之后,可以用U盘直接安装,省时省力. 首先在互联网下载UltraISO光盘映像文件制作/编辑/格式转换工具,(当然还有其它如WinIS ...

  3. FineUI模拟树下拉列表

    模拟树的下拉列表 很多时候,我们希望在下拉列表中显示简单树状的层次结构,在菜单设置.机构设置等场景下这个需求尤为突出.也是基于项目需求的考虑,FineUI增加了模拟树的下拉列表的功能,显示效果如下所示 ...

  4. 3 linux、windows环境---路径分隔符不同导致的问题

    问题:通常在eclipse,IntelliJ IDEA等进行代码编写时,程序中用到路径通常采用/job/test.properties或D:/job/test.properties等是形式作为文件路径 ...

  5. Cocos2d-x 3.0 场景切换

    场景切换要用到导演类Director,一般有两种方式,大多数是用替换场景(replaceScene),也可以用进栈(pushScene)出栈(popScene)的方式进行场景的替换. 场景切换代码: ...

  6. hdu5348 MZL's endless loop(欧拉回路)

    转载请注明出处: http://www.cnblogs.com/fraud/          ——by fraud MZL's endless loop Time Limit: 3000/1500 ...

  7. js实现点击ul/li等改变背景颜色

    今天项目遇到了标题所说的问题,找到一篇很高效的例子,值得学习. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//E ...

  8. 有关service

    在symfony2 服务注入容器的时候参数语法可以是这样: cellcom.twig.menu_extension: class: Cellcom\WebBundle\Twig\Extension\M ...

  9. hadoop学习之hadoop完全分布式集群安装

    注:本文的主要目的是为了记录自己的学习过程,也方便与大家做交流.转载请注明来自: http://blog.csdn.net/ab198604/article/details/8250461 要想深入的 ...

  10. js基础小总结之string&array&object

    一.数据类型之间的转换 string--->number :parseInt(string)/parseFloat(string); 注:在Date中,因为返回值date为单位为ms的字符串,将 ...