CODEWITHSUNDEEP
csscss-shapes
Cristiano Matos
Cristiano Matos

Reputation: 329

Image with right edge triangle

I am some time trying to make a complicated effect on the image, I made some attempts however not got it. I need this effect only in css without using javascript.

enter image description here

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

Upvotes: 0

Views: 100

Answers (1)

jbutler483
jbutler483

Reputation: 24539

You could achieve something like this through a couple of transformed pseudo elements*. By skewing the two pesudos, you can create the triangular effect.

A quick demo would be:

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>

* this would assume you wish to have a solid colour on the right hand side

Upvotes: 2

Related Questions