【CSS】英国国旗

2019年5月13日 249次阅读 来源: Rabbit_svip

《【CSS】英国国旗》 4067783_1314878745-01.jpg

HTML代码：
<div class="uk"></div>

CSS代码：

.uk {   
    width: 300px;
    height: 200px;
    border: 1px solid #000;
    box-shadow: 2px 2px 3px 3px rgba(0, 0, 0, .25);
    margin-bottom: 20px;
    
  background-image:
    linear-gradient(90deg, #cf142b, #cf142b),
    linear-gradient(0deg, #cf142b, #cf142b), 
    linear-gradient(90deg, #FFFFFF, #FFFFFF),
    linear-gradient(0deg, #FFFFFF, #FFFFFF), 
    linear-gradient(35deg, transparent 45%, #ffffff 45%, #ffffff 48%, #cf142b 48%, #cf142b 51%, #ffffff 51%, #ffffff 56%, transparent 56%, transparent 100%), 
    linear-gradient(-35deg, transparent 45%, #ffffff 45%, #ffffff 50%, #cf142b 50%, #cf142b 53%, #ffffff 53%, #ffffff 56%, transparent 56%, transparent 100%);

    background-position: 0 50%, 50% 0,0 50%, 50% 0, 0 100%, 100% 0;

    background-size: 100% 20%, 16% 100%, 100% 33%, 25% 100%, 100% 100%, 100% 100%;

    background-repeat: no-repeat;

    background-color: #00247d;

}

希望以上笔记对大家有帮助。
我的其他笔记在微信公众号：Rabbit_svip

《【CSS】英国国旗》 qrcode_for_gh_6c5c0ec5e65b_258 (1).jpg

    原文作者：Rabbit_svip
    原文地址: https://www.jianshu.com/p/80cb9c9f049a
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞