不用放背景圖,直接針對<img />裁切圖片

img{
   width: 100%;
   height: 66rem;
   object-fit: cover;
   object-position: 50% 50%;
}
0

單純用css改變element形狀,支援多邊形、內凹

-webkit-clip-path:polygon(10% 100% ,0 100%,0 0, 100% 0%, 100% 10%, 10% 10%);
閱讀更多
0

網頁想要排版成n欄一排

<div class="grid">
  <div class="grid__item"></div>
</div>
.grid {
  display: flex;
  flex-wrap: wrap;
    &__item {
      margin-bottom: $gutter;
      width: calc((100% - 2 * #{$gutter}) / 3);
      &:not(:nth-child(3n)) {
        margin-right: $gutter;
      }
  }
}
0