主页 / 问题 / 848857
Accepted
humster_spb
Asked:2020-07-01 19:33:52 +0000 UTC2020-07-01 19:33:52 +0000 UTC

HTML-CSS：转换块时如何摆脱轮廓？

  • 772

任务是使这种类型的滑块跨浏览器。我应用转换+伪元素。一切似乎都很简单，但从某个地方出现了包装块的轮廓：

.wrapper {
  width: 250px;
  height: 180px;
  margin: 50px;
  border-radius: 30px 20px;
  transform: skew(10deg, 5deg);
  position: relative;
  overflow: hidden;
}
.img {
  width: 150%;
  transform: translate(-20px, -20px) skew(-10deg, -5deg);
}
.wrapper:before {
  content: '';
  position: absolute;
  left: 220px;
  display: block;
  width: 60px;
  height: 200px;
  border-radius: 20px;
  background-color: white;
  transform: skew(-20deg, -10deg);
  z-index: 1;
}

.wrapper:after {
  content: '';
  position: absolute;
  top: 160px;
  display: block;
  width: 250px;
  height: 60px;
  border-radius: 20px;
  background-color: white;
  transform: skew(-20deg, -10deg);
}
.arrow {
  position: absolute;
  width: 30px;
  height: 40px;
  background-color: red;
  z-index: 2;
  top: 135px;
  left: 180px;
  color: white;
  transform: rotate(45deg) skew(0, 0);
  border-radius: 5px;
  cursor: pointer;
}
.arrow div {
  font-weight: bold;
  padding: 10px 0 0 7px;
  transform: rotate(-45deg);
}
<div class="wrapper">
  <img src="https://avatars.mds.yandex.net/get-pdb/33827/8ee85d23-431a-487b-8efb-d8f5fdd6bf29/s1200" alt="" class="img" />
  <div class="arrow"><div>>><div></div>
</div>

这个循环是什么以及如何摆脱它？

而且，也许还有其他方法可以制作这样的滑块跨浏览器？

html

1 个回答

  1. Best Answer

    我们添加一张图片translateZ(0)，没有更多的轮廓：

    .wrapper {
  width: 250px;
  height: 180px;
  margin: 50px;
  border-radius: 30px 20px;
  transform: skew(10deg, 5deg);
  position: relative;
  overflow: hidden;
}
.img {
  width: 150%;
  transform: translate(-20px, -20px) skew(-10deg, -5deg) translateZ(0);
}
.wrapper:before {
  content: '';
  position: absolute;
  left: 220px;
  display: block;
  width: 60px;
  height: 200px;
  border-radius: 20px;
  background-color: white;
  transform: skew(-20deg, -10deg);
  z-index: 1;
}

.wrapper:after {
  content: '';
  position: absolute;
  top: 160px;
  display: block;
  width: 250px;
  height: 60px;
  border-radius: 20px;
  background-color: white;
  transform: skew(-20deg, -10deg);
}
.arrow {
  position: absolute;
  width: 30px;
  height: 40px;
  background-color: red;
  z-index: 2;
  top: 135px;
  left: 180px;
  color: white;
  transform: rotate(45deg) skew(0, 0);
  border-radius: 5px;
  cursor: pointer;
}
.arrow div {
  font-weight: bold;
  padding: 10px 0 0 7px;
  transform: rotate(-45deg);
}
    <div class="wrapper">
  <img src="https://avatars.mds.yandex.net/get-pdb/33827/8ee85d23-431a-487b-8efb-d8f5fdd6bf29/s1200" alt="" class="img" />
  <div class="arrow"><div>>><div></div>
</div>

    • 12

相关问题