如何用CSS设计一个漂亮的旗帜?

19 min read

好的,以下是一个简单的方式来使用CSS画一个旗帜:

HTML部分:

<div class="flag"></div>

CSS部分:

.flag {
  width: 200px; /* 填入适当的宽度 */
  height: 100px; /* 填入适当的高度 */
  background-color: red; /* 填入适当颜色 */
  position: relative;
}

.flag:before {
  content: '';
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-left: 100px solid red; /* 填入适当颜色 */
  border-bottom: 50px solid transparent;
  position: absolute;
  left: 0;
  top: 0;
}

.flag:after {
  content: '';
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-right: 100px solid red; /* 填入适当颜色 */
  border-bottom: 50px solid transparent;
  position: absolute;
  right: 0;
  bottom: 0;
}

这个代码段将会画出一个红色的旗帜。如果要画不同的旗帜,请适当更改颜色、尺寸等设置。