<!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# 根据窗口截图，合并图片

    c# 根据窗口截图,合并图片 public class CaptureWindows { #region 类 /// <summary> /// Helper class containi ...

  2. Asp.Net EF Code First 简单入门

    今天在上班期间花了点时间学习了一下微软的EntityFramework Code First技术,这篇文章只是简单的入门,不多废话,下面直入主题. 一.首先添加一个解决方案,接着添加一个web网站,D ...

  3. untiy绘制网格mesh

    关于绘制网格, 雨松前辈 已经解释的非常的到位,这里我只是搬运工,实在是感觉自己去描述的话不会有雨松大神描述的清楚,该文章循序渐进,一步步引导读者去理解unirty 绘图机制,真的是没有比这个再好得了 ...

  4. 移动web前端的一些硬技能（一）关于移动设备

    移动端web其实也就是小尺寸触摸屏设备的web,其中包含了两个词——1.小尺寸设备:2.触摸屏.能把这两个问题给解决掉,就已经是一个基本合格的移动web前端开发工程师了.对于前端工程师来说,前路漫漫, ...

  5. 鼠标悬停移除更换class

    $("#xinl").mouseover(function()  //鼠标悬停执行函数 { $(".xl").removeClass().addClass(&q ...

  6. python学习第三天 --布尔类型

    我们已经了解了Python支持布尔类型的数据,布尔类型只有True和False两种值,但是布尔类型有以下几种运算: 与运算:只有两个布尔值都为 True 时,计算结果才为 True. True and ...

  7. 函数:lambda表达式 - 零基础入门学习Python021

    函数:lambda表达式 让编程改变世界 Change the world by program lambda表达式 Python允许使用lambda关键字来创建匿名函数.我们提到一个新的关键字:匿名 ...

  8. BasicExcel说明文档

    BasicExcel说明文档 BasicExcel原始链接:http://www.codeproject.com/Articles/13852/BasicExcel-A-Class-to-Read-a ...

  9. awk的接口实现方案1

    module/a.awk function sum(a, b) { return a + b } module/b.awk function sum(a, b) { return a * b } ma ...

  10. 在fedora 20下使用ssh server

    在红帽和centos下,一般安装完后会自带ssh,然后可以通过/etc/init.d/sshd start的方式运行,但是在Fedora 20下,系统改用了另外一套服务开启机制. 首先安装ssh se ...