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

 1 <style>
 2 .div1{
 3 width: 500px;
 4 height: 600px;
 5 /* padding: 20px 0px 0px 50px; */
 6 /* border: 1px solid red; */
 7 /* text-align: center; */
 8 margin-left: 25%;
 9 margin-top: 10%;
10 }
11 .div01{
12 display: inline-block;
13 background-color: black;
14 width: 10px;
15 height: 600px;
16 float: left;
17 }
18 .div02{
19 display: inline-block;
20 width: 0px;
21 height: 0px;
22 border-left:300px solid red;
23 border-top:100px solid transparent;
24 border-right:100px solid transparent;
25 border-bottom:100px solid transparent;
26 float: left;
27 }
28 </style>
29  
30 <div class="div1">
31 <div class="div01"></div>
32 <div class="div02"></div>
33 </div>

2.2实现图

 

posted @ 2019-07-24 10:26  blog_CccK  阅读(1374)  评论(0)  编辑  收藏  举报