html css画五角星,css画梯形，css画五角星， css画六角星 ，css画六边形

好的，我分别为您回答如下：

1. HTML CSS 画五角星

HTML结构：

<div class="star"></div>

CSS样式：

.star {
  width: 0;
  height: 0;
  border-right: 50px solid transparent;
  border-bottom: 35px solid #f1c40f;
  border-left: 50px solid transparent;
  position: relative;
  top: -10px;
}
.star:before {
  content: "";
  width: 0;
  height: 0;
  border-right: 50px solid transparent;
  border-bottom: 35px solid #f1c40f;
  border-left: 50px solid transparent;
  position: absolute;
  top: -25px;
  left: -50px;
  transform: rotate(35deg);
}
.star:after {
  content: "";
  width: 0;
  height: 0;
  border-right: 50px solid transparent;
  border-bottom: 35px solid #f1c40f;
  border-left: 50px solid transparent;
  position: absolute;
  top: -25px;
  left: 0;
  transform: rotate(-35deg);
}

2. CSS 画梯形

HTML结构：

<div class="trapezoid"></div>

CSS样式：

.trapezoid {
  border-bottom: 100px solid #f1c40f;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  height: 0;
  width: 100px;
}

3. CSS 画六角星

HTML结构：

<div class="hexastar"></div>

CSS样式：

.hexastar {
  width: 0;
  height: 0;
  border-bottom: 50px solid #f1c40f;
  border-left: 29px solid transparent;
  border-right: 29px solid transparent;
  position: relative;
}
.hexastar:before {
  content: "";
  width: 0;
  height: 0;
  border-top: 50px solid #f1c40f;
  border-left: 29px solid transparent;
  border-right: 29px solid transparent;
  position: absolute;
  top: -50px;
  left: -29px;
}

4. CSS 画六边形

HTML结构：

<div class="hexagon"></div>

CSS样式：

.hexagon {
  width: 100px;
  height: 55px;
  background-color: #f1c40f;
  position: relative;
}
.hexagon:before, .hexagon:after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
}
.hexagon:before {
  bottom: 100%;
  border-bottom: 28px solid #f1c40f;
}
.hexagon:after {
  top: 100%;
  width: 0;
  border-top: 28px solid #f1c40f;
}