1. <!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);
  2.  
  3. }
    #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: '';
    }
  4.  
  5. </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. document.write 向文档中写内容,包括文本、脚本、元素之类的,但是它在什么时候执行不会覆盖当前页面内容尼?

    当你打开一个页面,浏览器会 调用 document.open() 打开文档 document.write(...) 将下载到的网页内容写入文档 所有内容写完了,就调用 document.close() ...

  2. Enable-Migrations 在应用程序配置文件中找不到xx连接字符串

    在解决方案中有多个项目时,使用Enable-Migrations 命令进行数据迁移时,出现以下错误: 尝试在Enable-Migrations 命令中指定-projectName也不行,最后将要操作的 ...

  3. Linux下oracle 11g安装

    服务器环境要求     硬盘 20G以上 ,必须高于1G的物理内存,交换空间一般为内存的2倍,例如:1G的内存可以设置swap 分区为3G大小   在Root用户下执行以下步骤: 修改用户的SHELL ...

  4. 关于垂直切分Vertical Sharding的粒度

    转载原文地址 http://blog.csdn.net/bluishglc/article/details/6274841 垂直切分的粒度指的是在做垂直切分时允许几级的关联表放在一个shard里.这个 ...

  5. hdu 2564 词组缩写

    Problem Description 定义:一个词组中每个单词的首字母的大写组合称为该词组的缩写. 比如,C语言里常用的EOF就是end of file的缩写. Input 输入的第一行是一个整数T ...

  6. ubuntu12.04 安装 ruby1.9.3

    sudo apt-add-repository ppa:brightbox/ruby-ng sudo apt-get update sudo apt-get install ruby rubygems ...

  7. smarty模板引擎中section循环loop与total的区别

    在smarty模板引擎的section循环中 $data=[101,102,103,105,104]; section的两个属性total与loop {section foo $data start= ...

  8. Double Strings Solved Problem code: DOUBLE

    # Fuking silly, OTZ.... import sys def main(): n = int(raw_input()) for num in sys.stdin: if int(num ...

  9. mysql 套事物实例

    public static DataSet GetPPriceList(string aircompany, string departPort, string arrivePort, string ...

  10. MyEclipse8.5自动生成注册码

    package com; import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamRe ...