一个技术宅的个人博客

仅用一个DIV和CSS绘制中国五星红旗

在网上看到牛人用DIV+CSS画一面中国国旗,太牛了,转载一下给大家看看吧。
因为文字投影没办法旋转的原因,四颗小星星不能做到指向中心的大星星,还是有些BUG的。以下是实现效果:
chinese-flag

下面是使用的HTML代码,外层的DIV仅仅是后面的背景,请无视。

CSS代码:

#flag {
    width: 600px;
    height: 400px;
    background: #898989;
    margin: 0 auto;
    position: relative;
}

#flag div {
    position: absolute;
    left: 75px;
    top: 50px;
    background: #f00;
    background: -webkit-linear-gradient(-45deg, #ff0000 0%,#d60000 18%,#ff0000 41%,#d30000 68%,#ff0000 100%);
    background: linear-gradient(135deg, #ff0000 0%,#d60000 18%,#ff0000 41%,#d30000 68%,#ff0000 100%);
    width: 450px;
    height: 300px;
    box-shadow: 4px 4px 8px rgba(0,0,0,.4);
}

#flag div:before {
    content: "★";
    position: absolute;
    color: #ffff37;
    font-size: 90px;
    left: 33px;
    top: 37px;
}

#flag div:after {
    content: "★";
    position: absolute;
    color: #ffff37;
    font-size: 33px;
    left: 140px;
    top: 18px;
    text-shadow: 33px 36px 0 #ffff37,
                33px 82px 0 #ffff37,
                0 115px 0 #ffff37;
}

目前使用text-shadow的方案似乎是解决不了星星旋转角度的问题的,如果抛开仅用一个DIV的限制,倒可以轻轻松松的使用transform完成旋转。

赞(11) 打赏
未经允许不得转载:孙健个人博客 » 仅用一个DIV和CSS绘制中国五星红旗

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏