How to display an image with a skew effect?-CodePudding

I am unable to reproduce the above image. I can make the skew effect but I don't know how to add the blue border below the image which should also be askew

My code :

    .image {
       position: relative;

        &:after {
          content: "";
          top: 0;
          left: 100%;
          width: 9%;
          bottom: 0;
          position: absolute;
          transform: skew(-8deg);
          transform-origin: top;
          background: blue;
        }

I don't know how to overlay ...How to reproduce this "double effect" ? Thank you

CodePudding user response：

I would do it like below:

.box {
  display: inline-block;
  overflow: hidden;
  transform: skew(-10deg);
  transform-origin: top;
  border: solid #0000;
  border-width: 0 8px 8px 0;
  background: 
   linear-gradient(red 0 0) 100% 100%/ 
   50% 60%  /* 50% = width, 60% = height */
   border-box no-repeat;
}

img {
  display: block;
  transform: skew(10deg); /* same as container */
  transform-origin: inherit;
}

<div >
  <img src="https://picsum.photos/id/1033/300/200">
</div>

CodePudding user response：

You may also use clip-path(instead skew) and filter(for the shadow effect), here is an example

div {
  width: max-content;
  padding: 40px;
  filter:drop-shadow(10px 10px #243782);
  clip-path: polygon(0% 0%, calc(100% - 20px) 0%, calc(100% - 68px) 100px, 100% 100px, 100% 100%, 120px 100%, 120px calc(100% - 43px), 0% calc(100% - 43px));/* cuts off parts of the shadow*/
}

img {
   display:block;
  clip-path: polygon(0 0, 100% 0, calc(100% - 120px) 100%, 0% 100%);/* cuts into a shape */
}

/* see more filter effect */
body:hover {
  filter:drop-shadow(0 0 0.5em)
}

<div><img src="https://picsum.photos/id/111/440/265"></div>

ressource :

helps you create your path https://bennettfeely.com/clippy/

https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path

https://developer.mozilla.org/en-US/docs/Web/CSS/filter

CodePudding user response：

You don't need to :before. Just add box-shadow to image like this css code. (maybe you need to change values of bax-shdow):

box-shadow: 34px 36px 0 -23px #295e97;