[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>
[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*/
}