HTML實現三角形和旗幟代碼

1.三角形

1.1html+css

<style>
*{
margin: 0px;
padding: 0px;
}
span{
display: block;
margin-left: 25%;
width: 0px;
height: 0px;
border: 200px solid transparent;
border-bottom-color:red;
}
</style>
<span></span>

1.2實現圖

 

2.旗幟

2.1html+css

<style>
.div1{
width: 500px;
height: 600px;
/* padding: 20px 0px 0px 50px; */
/* border: 1px solid red; */
/* text-align: center; */
margin-left: 25%;
margin-top: 10%;
}
.div01{
display: inline-block;
background-color: black;
width: 10px;
height: 600px;
float: left;
}
.div02{
display: inline-block;
width: 0px;
height: 0px;
border-left:300px solid red;
border-top:100px solid transparent;
border-right:100px solid transparent;
border-bottom:100px solid transparent;
float: left;
}
</style>
 
<div class="div1">
<div class="div01"></div>
<div class="div02"></div>
</div>

2.2實現圖