纯CSS制作一面带直角梯形的旗子

陽陽陽

StackOverflow上有人问，然后就写了一个。如果有帮助的话，还有SO的账 号的话，记得给我点个↑
SO链接：https://stackoverflow.com/questi ... t132772778_75241946

[HTML] 纯文本查看 复制代码

<title>测试</title>
<style type="text/css">
.RightAngleTrapezoid {
 width:120px;height:0;margin:100px auto;
 border-right:15px solid transparent;
 border-top:15px solid;
  position:absolute;
}
</style>
<div class="Flag" style="transform:scale(0.5,1.1)">
<div class="UpPosition">
  <div class="RightAngleTrapezoid" style="color:red;transform:rotate(360deg);left:0;top:0;width:250"></div>
<div class="RightAngleTrapezoid" style="color:yellow;transform:rotate(180deg);left:250;top:0;width:180;"></div>
</div>

<div class="MiddlePosition">
  <div class="RightAngleTrapezoid" style="color:blue;transform:rotate(360deg);left:0;top:15;width:170;border-right:80px solid transparent;border-top:90px solid"></div>
<div class="RightAngleTrapezoid" style="color:red;transform:rotate(180deg);left:170;top:15;width:195;border-right:80px solid transparent;border-top:90px solid"></div>
</div>

<div class="DownPosition">
  <div class="RightAngleTrapezoid" style="color:red;transform:rotate(360deg);left:0;top:105;width:155"></div>
<div class="RightAngleTrapezoid" style="color:yellow;transform:rotate(180deg);left:155;top:105;width:275;"></div>
</div>
</div>

最后，从网上发现了一张斗图，放过来分享下。

陽陽陽

小白弟弟 发表于 2023-1-26 11:56
截个图看看效果不

直接C到剪辑版，然后打开https://c.runoob.com/front-end/61/
直接V上去就好了。比加载图片还快

陽陽陽

有个大佬给了另一个思路：

[HTML] 纯文本查看 复制代码

<div class="container">

</div>

[CSS] 纯文本查看 复制代码

.container {
  height: 400px;
  border: solid #0000;
  border-width: 50px 0; /* control the width of the top/bottom border */
  background:
    linear-gradient(110deg, blue 50%,red 50.1%) padding-box, /* the middle gradient */
    linear-gradient(110deg,red 50%,yellow 50.1%) border-box /* the border gradient*/
}

灵感吖

支持一下，学习看看~~~

一指温柔

谢谢分享

q1670898883

99999999999999999999999

q1670898883

66666666666666666666666

yhy9898

6666666666666666666666666

六先生

谢谢分享！

396384183

分享就是给力

xjshuaishuai

谢谢分享！