我可以使用CSS制作形状吗？

Question

我想使用CSS 3制作这样的形状，但是我不能像这样旋转边框。

有什么方法可以仅使用CSS吗？

我考虑过这样的课程：

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

但是我没有得到想要的结果

更新：

in发现了这一点，但仍需要进行一些修改才能像通缉犯一样

-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%);

Answer 1

只能使用CSS来完成：

.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>