用CSS画一个三角形

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#triangle {
width: 0;
height: 0;
border-left: 100px solid transparent;
border-right: 200px solid transparent;
border-bottom: 150px solid #f00;
transform: rotate(-30deg);
}

 

#triangle-wrap {
margin-top: 100px;
width: 0;
height: 0;
border-left: 154.8px solid transparent;
border-right: 154.8px solid transparent;
border-bottom: 154.8px solid #000;
position: relative;
}

 

#content {
width: 0;
height: 0;
border-left: 150px solid transparent;
border-right: 150px solid transparent;
border-bottom: 150px solid #f00;
position: absolute;
left: -150px;
top: 2.8px;
}
</style>
</head>
<body>
<div id="triangle">

 

</div>
<div id="triangle-wrap">
<div id="content">

 

</div>
</div>
</body>
</html>
 
效果：

 

 

posted @ 2021-04-27 15:38  #Friday  阅读(52)  评论(0)    收藏  举报