滑动滑块分页子弹形状

时间:2018-12-31 14:40:05

标签: css swiper

所以目前我已经成功完成了滑动滑块插件的渲染,但是现在我想将项目符号的形状更改为六角形。我已经为十六进制编写了代码,但项目符号本身似乎并没有改变。

也许我在这里错过了一些东西,所以任何帮助都是很棒的。

CSS

.swiper-pagination-bullet {
  position: relative;
  width: 10px;
  height: 5.77px;
  background-color: #64C7CC;
  margin: 2.89px 4px;
  border-radius: 0;
}

.swiper-pagination-bullet:before,
.swiper-pagination-bullet:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
}

.swiper-pagination-bullet:before {
  bottom: 100%;
  border-bottom: 2.89px solid #64C7CC;
}

.swiper-pagination-bullet:after {
  top: 100%;
  width: 0;
  border-top: 2.89px solid #64C7CC;
}

我当前的结果是这个

0 个答案:

没有答案