css中border属性画五星红旗

web中画五星红旗的方法有很多种,可以用canvas画图,svg中的多边形属性画,但是本人为了扎实好css属性知识,只借助css方法进行五星红旗的制作,以供大家思考.

本文思路如下:

1.选取一个div元素(任何元素)根据css中的块元素的border属性,做好单个三角形的制作,同时为了能够复用,可以用在任意一个非块元素上,必须设置display:block,使元素作为块元素

2.根据css的伪类:after以及:before属性,在1中的元素上构造两个旋转(+-68deg)的三角形

3.根据1,2得出的三角形进行拼接,并调整好属性,画好单个五角星

4.当我们画好五角星之后,就可以根据transform:scale 方法,放大缩小并创建其他的4个小五角星

5.最后在html中构建一个四方形,作为旗面

这里需要注意的是,为了做到五星红旗与可视窗口的同比例自适应协调变化,所有的元素的width,height等等均以vw作为单位(vw是根据可视窗口的宽度width作为自适应)

代码如下

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <link rel="stylesheet" href="css/five.css"></>
  </head>
  <body>
    <div class="flag">
      <div class="fiveangle middle flag0"></div>
      <div class="fiveangle small flag1"></div>
      <div class="fiveangle small flag2"></div>
      <div class="fiveangle small flag3"></div>
      <div class="fiveangle small flag4"></div>
    </div>

  </body>
</html>

css/five.css部分为

.fiveangle{
  position: relative;
  display: block;
  height: 0vh;
  width: 0vw;
  left:0vw;
  border:8vw solid transparent;
  border-top: 5vw solid yellow;
  border-left: 7vw solid transparent;
  border-bottom: 0vw;

}

.flag{
  height:30vw;
  width: 50vw;
  position:relative;
  background-color:red;
}

.fiveangle:before{
  position: absolute;
  display: block;
  top: -5vw;
  height: 0vw;
  width: 0vw;
  border: 7vw solid transparent;
  border-top: 6vw solid yellow;
  border-left: 7vw solid transparent;
  border-right: 7vw solid transparent;
  border-bottom: 0vw;
  left:-6.5vw;
  transform: rotate(68deg);

  content:'';
}
.fiveangle:after{
  position: absolute;
  display: block;
  top:-5vw;
  height: 0vw;
  width: 0vw;
  border:7vw solid transparent;
  border-top: 6vw solid yellow;
  border-right: 7vw solid transparent;
  border-left: 7vw solid transparent;
  border-bottom: 0vw;
  left:-6vw;
  transform: rotate(-68deg);
  content: '';//这里的content必须添加,否则无法显示
}
.fiveangle.middle{
  transform:scale(0.5);
}
.fiveangle.small{
  transform: scale(0.2);
}
.flag0{
  top:17%;
}
.flag1{
  position: absolute;
  left:12%;
  top:0%;
}
.flag2{
  position: absolute;
  left:18%;
  top:10%;
}
.flag3{
  position: absolute;
  left:18%;
  top:25%;
}
.flag4{
  left:12%;
  position: absolute;
  top:35%;
}

The page can be show below:

This is a good instance to learn the position,border,以及伪类的应用,比较全面,没有用到js,canvas,svg的使用,对后期学习canvas等等打应用都会有比较好的帮助

话又说回来,我们并不太满足静态的红旗,需要把它做成动态的,并随风飘扬的红旗,如何做??大家有什么意见吗?当然,尽量不要用js,而是用css本身的特性...........

道法自然,一生二,二生三,三生万物

css中border属性画五星红旗

猜你喜欢