enter image description here

I want to make a similar effect to this one not changing html code , using only CSS , In HTML i have got only one div with class "square" , Thank you for your support in advance .

CodePudding user response：

i think that is what you want

.container {
  font-size: 16px;
  background: #fff;
  margin: 0 auto;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;

  -webkit-perspective: 28em;
  -moz-perspective: 28em;
  perspective: 28em;
  position: relative;
  top: 100px;
}


.box {
  position: absolute;
  width: 14em;
  height: 14em;
  left: 50%;
  margin-left: -7em;    
  backface-visibility: hidden;
}

.anim {
  transition: all 0.5s ease-in-out;    
}

.b0 {
  transform: translateX(-11.7em) rotateY(30deg) ;
}

.box img {
    width: 100%;
    height: 100%;
    border-radius: 5px;
}

@media(max-width: 768px) {
  .container {
    font-size: 12px;
  }
}

@media(max-width: 560px) {
  .container {
    font-size: 8px;
  }
}

<div >
  <div >
    <img src="http://www.skitzone.com/wp-content/uploads/2010/06/I_am_nothing__in_the_dark_by_islandtime-630x630-500x500.jpg" alt="" />
  </div>
</div>

CodePudding user response：

The requirement is to cut the top in a sloping manner.

This snippet does this by putting the linear-gradient that is required for the border into a before pseudo element, using clip-path to get the required cutting off of the top, and putting the image as background on an after pseudo element.

.square {
  width: 20vmin;
  height: 20vmin;
  clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 100%);
  position: relative;
}

.square::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(red, blue);
  background-image: linear-gradient(to right, #a2ca3c 0%, #0a7cff 50%, #a2ca3c 100%);
  z-index: -1;
}

.square::after {
  content: '';
  position: absolute;
  --borderW: 3%;
  top: var(--borderW);
  left: var(--borderW);
  width: calc(100% - (2 * var(--borderW)));
  height: calc(100% - (2 * var(--borderW)));
  background-image: url(https://pesi.pl/img/main-bg.jpg);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat no-repeat;
  clip-path: polygon(var(--borderW) var(--borderW), calc(100% - var(--borderW)) calc(20%   var(--borderW)), calc(100% - var(--borderW)) calc(100% - var(--borderW)), var(--borderW) calc(100% - var(--borderW)));
  z-index: -1;
}

<div ></div>

Obviously you will want to decide on exactly what width you want the border to be and whether the border is included in the overall size of the .square element (as here).