右边三角形的图像

Question

我有时间试图对图像产生复杂的影响，但我做了一些尝试，但是没有得到它。我只在css中使用此效果而不使用javascript。

CSS

.container{
    width: 500px;
    background-color: #0c2f45;
}

.image-container {
    background-color: #194c6e;
    width: 266px;
}

.image-container img{
    width: 250px;
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
}

jsfiddle

Answer 1

你可以通过几个变换的伪元素*来实现这样的事情。通过倾斜两个pesudos，您可以创建三角效果。

快速演示将是：

div {
  height: 200px;
  width: 300px;
  background: url(http://lorempixel.com/300/200);
  position: relative;
  overflow: hidden;
}
div:before,
div:after {
  content: "";
  position: absolute;
  height: 50%;
  width: 20%;
  background: tomato;
  border-left: 10px solid firebrick;
  left: 80%;
}
div:before {
  top: 0;
  transform: skewX(10deg);
}
div:after {
  top: 50%;
  transform: skewX(-10deg);
}

<div></div>

^{*这会假设你希望右手边有一个纯色}