html - CSS3自定义形状

Question

我想要css3中的相同形状请帮忙

我会试试这个

.shape{ 
  background:#000;
  width:150px; margin:50px;
  height:150px; color:#fff; border-radius:0  0 0px  25%;
  -ms-transform: rotate(20deg); /* IE 9 */
  -webkit-transform: rotate(20deg); /* Safari */ 
  transform: rotate(20deg); 
}

<div class="shape">magic</div>

标签： htmlcss

Answer 1

您可以考虑如下所示的倾斜变换：

.box {
  margin-left:auto;
  width:300px;
  height:300px;
  border-radius:0 0 0 40px;
  transform:skewY(20deg);
  transform-origin:top right;
  position:relative;
  overflow:hidden;
}
.box:before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:url(https://picsum.photos/800/600?image=1069) center/cover no-repeat;
  transform:skewY(-20deg);
  transform-origin:top right;
}

body {
 margin:0;
}

<div class="box">
</div>