html div绘制国旗,css3画国旗

红太狼 2022-10-09 05:52 210阅读 0赞

国旗

\* \{

margin: 0;

padding: 0;

\}

.flag \{

margin: 2vw auto;

width: 51.2vw;

height: 34.1vw;

background: \#f00;

\}

.flag-star,

.flag-star::before,

.flag-star::after \{

width: 0;

height: 0;

border-right: 5.0vw solid transparent;

border-left: 5.0vw solid transparent;

border-top: 3.5vw solid \#ff0;

\}

.flag-star \{

position: relative;

\}

.flag-star::after,

.flag-star::before \{

position: absolute;

content: '';

top: -3.5vw;

left: -5vw;

\}

.flag-star::after \{

\-webkit-transform: rotate(70.5deg);

\-moz-transform: rotate(70.5deg);

\-ms-transform: rotate(70.5deg);

\-o-transform: rotate(70.5deg);

transform: rotate(70.5deg);

\}

.flag-star::before \{

\-webkit-transform: rotate(-70.5deg);

\-moz-transform: rotate(-70.5deg);

\-ms-transform: rotate(-70.5deg);

\-o-transform: rotate(-70.5deg);

transform: rotate(-70.5deg);

\}

.flag-star:nth-child(1) \{

\-webkit-transform: translate(3.5vw, 7vw) scale(.9);

\-moz-transform: translate(3.5vw, 7vw) scale(.9);

\-ms-transform: translate(3.5vw, 7vw) scale(.9);

\-o-transform: translate(3.5vw, 7vw) scale(.9);

transform: translate(3.5vw, 7vw) scale(.9);

\}

.flag-star:nth-child(2) \{

\-webkit-transform: translate(11vw, -2vw) scale(.33) rotate(-45deg);

\-moz-transform: translate(11vw, -2vw) scale(.33) rotate(-45deg);

\-ms-transform: translate(11vw, -2vw) scale(.33) rotate(-45deg);

\-o-transform: translate(11vw, -2vw) scale(.33) rotate(-45deg);

transform: translate(11vw, -2vw) scale(.33) rotate(-45deg);

\}

.flag-star:nth-child(3) \{

\-webkit-transform: translate(15vw, -2vw) scale(.33) rotate(45deg);

\-moz-transform: translate(15vw, -2vw) scale(.33) rotate(45deg);

\-ms-transform: translate(15vw, -2vw) scale(.33) rotate(45deg);

\-o-transform: translate(15vw, -2vw) scale(.33) rotate(45deg);

transform: translate(15vw, -2vw) scale(.33) rotate(45deg);

\}

.flag-star:nth-child(4) \{

\-webkit-transform: translate(15vw, 0px) scale(.33);

\-moz-transform: translate(15vw, 0px) scale(.33);

\-ms-transform: translate(15vw, 0px) scale(.33);

\-o-transform: translate(15vw, 0px) scale(.33);

transform: translate(15vw, 0px) scale(.33);

\}

.flag-star:nth-child(5) \{

\-webkit-transform: translate(11vw,0px) scale(.33) rotate(-45deg);

\-moz-transform: translate(11vw,0px) scale(.33) rotate(-45deg);

\-ms-transform: translate(11vw,0px) scale(.33) rotate(-45deg);

\-o-transform: translate(11vw,0px) scale(.33) rotate(-45deg);

transform: translate(11vw,0px) scale(.33) rotate(-45deg);

/\*-webkit-transform: matrix(.33, 0, 0, .33, 100, 0);\*/

\}

发表评论取消回复

表情：

评论列表（有 0 条评论，210人围观）

还没有评论，来说两句吧...

相关阅读

相关 [SCOI2015]国旗计划

[题目][Link 1] 首先考虑一下环形的区间覆盖问题怎么做我们可以把环倍长成链，之后惊讶的发现我只会枚举一个\\(i\\)作为起点跑\\(\[i,i+m\]\\)的区

柔光的暖阳◎/ 2023年10月11日 05:24/ 0 赞/ 39 阅读

相关荷兰国旗问题

一、问题描述荷兰国旗问题，顾名思义，就是按照荷兰国旗的形式，给定一个数 x ，将 < x 的数放到左边，=x 的数放中间，>x 的数放右边，将数组中的元素分成三块，有的

小鱼儿/ 2023年01月16日 06:17/ 0 赞/ 135 阅读

相关 canvas绘制中国国旗！

绘制中国国旗 1、题目 > 今天刚学了H5中的画布canvas元素，课堂上的案例挺有意思，就心血来潮想利用canvas绘制中国国旗； 2、思路 1. 第一

深藏阁楼爱情的钟/ 2022年10月15日 04:47/ 0 赞/ 188 阅读

相关 html div绘制国旗,css3画国旗

国旗 \ \{ margin: 0; padding: 0; \} .flag \{ margin: 2vw auto; width: 51.2vw; heig

红太狼/ 2022年10月09日 05:52/ 0 赞/ 211 阅读

相关荷兰国旗问题

时间：2014.08.07 地点：基地 \-----------------------------------------------------------------

短命女/ 2022年08月10日 17:43/ 0 赞/ 144 阅读

相关荷兰国旗问题（Java）

需求：给一个数组arr，给一个数num，将数组中小于num的数放在左边，等于num的数放在中间，大于num的数全部放在右边。代码： import jav

客官°小女子只卖身不卖艺/ 2022年05月20日 08:22/ 0 赞/ 149 阅读

相关 java抓取世界国家国旗

本文章是借鉴博客：https://blog.csdn.net/jclian91/article/details/80950334 ，好了，直接看源码： package

布满荆棘的人生/ 2022年05月20日 01:07/ 0 赞/ 261 阅读

相关 acm 荷兰国旗问题

荷兰国旗问题时间限制：3000 ms | 内存限制：65535 KB 难度：1 输入第1行是一个正整数n（n<100），表示有n组测试数据。接下

墨蓝/ 2022年05月17日 12:23/ 0 赞/ 138 阅读

相关快排-荷兰国旗

在使用partition-exchange排序算法时，如快速排序算法，我们会遇到一些问题，比如重复元素太多，降低了效率，在每次递归中，左边部分是空的(没有元素比关键元素小)，而

系统管理员/ 2022年05月16日 06:52/ 0 赞/ 171 阅读

相关荷兰国旗问题

刚才在严蔚敏的数据结构习题上看到的这个题。看了几篇博客。貌似都没有结合数据结构的意思来解释。让我有种冲动写篇文章。。就把这当作我的第一篇博文吧。问题描述：荷兰国旗问

╰+哭是因爲堅強的太久メ/ 2022年01月14日 06:45/ 0 赞/ 245 阅读