我可以用 CSS 制作这个形状吗？答案

【问题标题】：Can I make this shape with CSS?我可以用 CSS 制作这个形状吗？
【发布时间】：2019-04-12 18:51:24
【问题描述】：

我想使用 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);

但我没有得到想要的结果

更新：

找到了这个，但它仍然需要一些编辑才能像想要的一样

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

【问题讨论】：

重复stackoverflow.com/a/37810615/3855179
我会推荐这个页面：bennettfeely.com/clippy
那个形状可能需要一个 SVG。
@Wimanicesir 我使用了这个网站，但我仍然需要做一些编辑

标签： html css

【解决方案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>

【讨论】：