html+css web前端多边形

news2025/1/17 5:51:30

在这里插入图片描述

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>多边形</title>

<style type="text/css">

#pentagon_6_1 {
  position: absolute;
  top: 0px;
  height: 0; 
  width: 100; 
  border-left: 100px solid rgb(255, 255, 255); 
  border-top: 100px solid red; 
  border-right: 100px solid red; 
  border-bottom: 100px solid red;
} 

#pentagon_6_1:before { 
  content: "";
  position: absolute;
  left: 100px;
  top: -100px;
  height: 0; 
  width: 0; 
  border-left: 100px solid red; 
  border-top: 100px solid transparent; 
  border-right: 100px solid transparent; 
  border-bottom: 100px solid transparent;
}  
#pentagon_6 {
  position: absolute; 
  left: 500px;
  height: 0; 
  width: 0; 
  border-left: 120px solid transparent; 
  border-right: 120px solid transparent; 
  border-bottom: 100px solid red;
} 

#pentagon_6:before { 
  content: "";
  position: absolute;
  top: 100px;
  left: -120px;
  height: 140px;
  border-width: 120px;
  border-style: solid;
  border-color: red red transparent red;
}  

#pentagon_5 {
  position: absolute; 
  left: 1000px;
  height: 0; 
  width: 0; 
  border-left: 120px solid transparent; 
  border-right: 120px solid transparent; 
  border-bottom: 100px solid red;
} 

#pentagon_5:before { 
  content: ""; 
  position: absolute; 
  top: 100px; 
  left: -120px; 
  width: 140px;
  border-width: 120px 50px 0 50px; 
  border-style: solid; 
  border-color: red transparent transparent transparent; 
}  
</style>

</head>

<body>

<div id="pentagon_6_1"></div>
<div id="pentagon_6"></div>
<div id="pentagon_5"></div>

</body>

</html>