Search code examples
cssimagelayoutcrop

Css Custom Crop Image in Card

I would like to know how to edit a card I have to make. The challenge here is to custom crop the image according to a mockup. How can I do this?

enter image description here

I've already tried adding these attributes classes. But I can't control the crop and the image comes out of the DIV.

border-radius: 40px;
position: absolute;
top: -65%;
bottom: 0;
right: -25%;
overflow: hidden;
height: 162px;
width: 162px;
transform: rotate(-45deg);

Thank you for help

Solution

  • This display effect is a good opportunity to combine:

    • a positioned background-image
    • ::before and ::after pseudo-elements
    • clip-path

    Working Example:

    div {
  position: relative;
  width: 180px;
  height: 180px;
  margin: 0 12px;
  background: rgb(112, 173, 71) url('https://picsum.photos/176/110') no-repeat 2px 2px / 176px 110px;
  border: 1px solid rgb(47, 82, 143);
  border-radius: 4px;
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.3);
}

div::before,
div::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60%;
  background-color: rgb(68, 114, 196);
  clip-path: path('M 0 0 C 60 40 120 40 180 0 L 180 0 L 180 110 L 0 110 Z');
}

div::before {
  background-color: rgb(112, 173, 71);
  transform: translateY(-2px);
}
    <div></div>