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实现图