图像右侧的透明箭头

Question

我正在尝试在图像右侧放置一个透明箭头，垂直居中并显示背景图像。

我读过 this answer, and this codepen 基本上正是我想要的，但我无法理解它为什么有效以及我需要更改什么才能将其放在右侧。

Codepen 代码：

  .wrap {
  position: relative;
  overflow: hidden;
  width: 70%;
  height:150px;
  margin: 0 auto;
  background-color:#fff;
}

.wrap img {
  width: 100%;
  height: auto;
  display: block;
}

.wrap:before, .wrap:after {
  content:'';
  position: absolute;
  bottom: 0;
  width: 50%;
  background-color: inherit;
  padding-bottom:3%;
}

.wrap:before {
  right: 50%;
  -ms-transform-origin: 100% 100%;
  -webkit-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
  -ms-transform: skewX(45deg);
  -webkit-transform: skewX(45deg);
  transform: skewX(45deg);
}

.wrap:after {
  left: 50%;
  -ms-transform-origin: 0 100%;
  -webkit-transform-origin: 0 100%;
  transform-origin: 0 100%;
  -ms-transform: skewX(-45deg);
  -webkit-transform: skewX(-45deg);
  transform: skewX(-45deg);
}

Answer 1

图像上有两个白色背景的多边形，不是箭头而是两个多边形之间的space。改变 :before 和 :after 的宽度和位置，你可以移动三角形。

.wrap {
  position: relative;
  overflow: hidden;
  width: 70%;
  height:150px;
  margin: 0 auto;
  background-color:#fff;
}
.wrap img {
  width: 100%;
  height: auto;
  display: block;
}
.wrap:before, .wrap:after {
  content:'';
  position: absolute;
  bottom: 0;
  width: 100%;
  background-color: inherit;
  padding-bottom:3%;
}
.wrap:before {

  -ms-transform-origin: 100% 100%;
  -webkit-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
  -ms-transform: skewX(45deg);
  -webkit-transform: skewX(45deg);
  transform: skewX(45deg);
}
.wrap:after {
  left: 97%;
  -ms-transform-origin: 0 100%;
  -webkit-transform-origin: 0 100%;
  transform-origin: 0 100%;
  -ms-transform: skewX(-45deg);
  -webkit-transform: skewX(-45deg);
  transform: skewX(-45deg);
}

<div class="wrap">
    <img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg" />
</div>

在 Firefox 中某些分辨率下出现图像底部的像素，可以在 .wrap::before, .wrap::after

中固定宽度 bottom:-1px

Answer 2

您需要更改的主要 css 属性是 transform-origin 和 transform 以及一些其他更改，如下所示：

.wrap {
  position: relative;
  overflow: hidden;
  width: 70%;
  height:150px;
  margin: 0 auto;
  background-color:#fff;
}

.wrap img {
  width: 100%;
  height: auto;
  display: block;
}

.wrap:before, .wrap:after {
  content:'';
  position: absolute;
  right: 0;
  height: 50%;
  background-color: inherit;
  padding-right:3%;
}

.wrap:before {
  bottom: 50%;
  -ms-transform-origin: 100% 100%;
  -webkit-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
  -ms-transform: skewY(45deg);
  -webkit-transform: skewY(45deg);
  transform: skewY(45deg);
}

.wrap:after {
  top: 50%;
  -ms-transform-origin: 100% 0;
  -webkit-transform-origin: 100% 0;
  transform-origin: 100% 0;
  -ms-transform: skewY(-45deg);
  -webkit-transform: skewY(-45deg);
  transform: skewY(-45deg);
}

<div class="wrap">
    <img src="https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg" />
</div>

图像右侧的透明箭头

Transparent arrow on right side of image

css

css-shapes