HTML+CSS画三角
图片:
<style>
* {
margin: 0;
padding: 0;
}
#parent {
margin: 0 auto;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
#child {
margin: 0 auto;
width: 0px;
height: 0px;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid goldenrod;
}
#child2 {
margin: 0 auto;
width: 0px;
height: 0px;
border-left: 25px solid green;
border-right: 25px solid green;
border-bottom: 100px solid rgb(197, 214, 197);
}
</style>
<body>
<div id="parent"></div>
<br>
<div id="child"></div>
<br>
<div id="child2"></div>
</body>