CSS画直角梯形

目标

想做这样一个pk进度条的效果

思路

我们最终的实现目标是一个带圆角的直角梯形，无法直接画出，但我们可以画出一个矩形后面拼接一个平行四边形。平行四边形可以利用CSS transform属性的skewX函数画出，如下图。

最后利用transform属性的translateX函数将平行四边形移到合适位置就可以实现我们的需求。

代码实现

<div class="box">
	<div class="left-box">赞成</div>
	<div class="right-box">反对</div>
</div>

.box {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.left-box,.right-box {
  display: flex;
  justify-content: center;
  align-items: center;
  color: rgba(255, 255, 255, 1);
  font-weight: 600;
  font-size: 32px;
  position: relative;
  top: 0;
  left: 0;
  width: 400px;
  height: 200px;
}
.left-box {
  border-radius: 100px 0 0 100px;
  background-color: rgb(41, 223, 56);
  margin-right: 120px;
}
.right-box {
  border-radius: 0 100px 100px 0;
  background-color: rgb(219, 52, 52);
  margin-left: 120px;
}
.left-box::after, .right-box::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: -1;
}
.left-box::after {
  right: -120px;
  left: 100%;
  background: rgb(41, 223, 56);
  transform: translateX(-50px) skewX(-15deg);
  border-radius: 0 30px 30px 0;
}
.right-box::before {
  right: 100%;
  left: -120px;
  background: rgb(219, 52, 52);
  transform: translateX(50px) skewX(-15deg);
  border-radius: 30px 0 0 30px;
}

感觉矩形圆角也单独用伪元素实现更好一点

.box {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  padding: 0 5vh;
}

.left-box,.right-box {
  display: flex;
  justify-content: center;
  align-items: center;
  color: rgba(255, 255, 255, 1);
  font-weight: 600;
  font-size: 16px;
  position: relative;
  top: 0;
  left: 0;
  width: 30vw;
  height: 5vh;
  z-index: 2;
}
.left-box {
  background-color: rgb(41, 223, 56);
  margin-right: 8vw;
}
.right-box {
  background-color: rgb(219, 52, 52);
  margin-left: 8vw;
}
.left-box::before, .right-box::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: -1;
}
.left-box::before{
  left: -5vh;
  right: 100%;
  border-radius: 50%;
  transform: translateX(50%);
  background-color: rgb(41, 223, 56);
}
.right-box::after {
  left: 100%;
  right: -5vh;
  border-radius: 50%;
  transform: translateX(-50%);
  background-color: rgb(219, 52, 52);
}
.left-box::after, .right-box::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: -1;
}
.left-box::after {
  right: -10vw;
  left: 100%;
  background: rgb(41, 223, 56);
  transform: translateX(-5vw) skewX(-15deg);
  border-radius: 0 1vh 1vh 0;
}
.right-box::before {
  right: 100%;
  left: -10vw;
  background: rgb(219, 52, 52);
  transform: translateX(5vw) skewX(-15deg);
  border-radius: 1vh 0 0 1vh;
}