zoukankan      html  css  js  c++  java
  • 用CSS画五角星

    <!DOCTYPE html>
    <html>
    <head lang="en">
    <meta charset="UTF-8">
    <title>五角星</title>
    <style>
    #star-five {
    margin: 50px;
    position: relative;
    display: block;
    color: red;
    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;
    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;
    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>
  • 相关阅读:
    对路径“E:AnyWiseUnitBusiXtCalXtCal.SiteMain”的访问被拒绝。
    CentOS Docker 安装
    linux命令检查网络问题
    MYSQL命令(二)
    极简技术简录-HTTP
    Java遍历List、Map的集合方法
    jdbc连接数据库并插入一条带有日期的数据
    MYSQL命令(一)
    JDBC连接MySQL数据库批量插入数据
    观察者模式
  • 原文地址:https://www.cnblogs.com/webbest/p/5638777.html
Copyright © 2011-2022 走看看