Can I make this shape with CSS?

Question

i want to make a shape like this using CSS 3, but i couldn't rotate the border like this.

Is there any way to make this using css only?

i thought about a class like this:

border: 0px solid #1C6EA4;
border-radius: 40px 0px 0px 0px;
  -ms-transform: rotate(-20deg); /* IE 9 */
  -webkit-transform: rotate(-20deg); /* Safari */
  transform: rotate(-20deg);

but i didn't get the wanted result

UPDATE:

in found this but it still needs some edits to be like the wanted one

-webkit-clip-path: polygon(30% 0%, 100% 0, 100% 30%, 100% 100%, 70% 100%, 30% 100%, 14% 66%, 0% 30%);
clip-path: polygon(30% 0%, 100% 0, 100% 30%, 100% 100%, 70% 100%, 30% 100%, 14% 66%, 0% 30%);

I would recommend this page: https://bennettfeely.com/clippy/ — Wimanicesir, Apr 12 '19 at 10:36
@Wimanicesir i used this website but i still need to do some edits — Adnane Lamghari, Apr 12 '19 at 10:49

score 3 · Accepted Answer · answered Apr 12 '19 at 10:51

It can be done with CSS only:

.outer {
  border: 1px solid #ddd;
  overflow: hidden;
  height:300px;
  width:300px;
}

.image-container {
  border-radius: 40px 0px 0px 0px;
  transform: rotate(-20deg) translateX(100px) translateY(50px);
  overflow: hidden;
}
.image-container img {
  transform: rotate(20deg) translateX(-100px);
}

  <div class="outer">
    <div class="image-container">
      <img src="http://lorempixel.com/400/400" />
    </div>
  </div>

Can I make this shape with CSS?

1 Answers1