cssで画像の角を切り落としたデザインにする方法

Question

cssで画像の角を切り落としたデザインにする方法がわからず質問です。

参考イメージのような形の中に画像をはてはめたいのですが、画像の角が切れてくれません。
下記のコードのcssで形を作成してましてそこに画像を入れて「overflow:hidden」を指定すればうまくいくと思ったのですが上手くいかず...
「imgタグ」「background 」の両方での画像指定を試しましたがダメでした。

    <div class="test">
      <img sec="">
     </div>



.test {
  width: 400px;
  height: 100px;
  background: linear-gradient(135deg, transparent 1.1rem, #000 0) top left,
  linear-gradient(-135deg, transparent 1.1rem, #000 0) top right,
  linear-gradient(-45deg, transparent 0, #000 0) bottom right,
  linear-gradient(45deg, transparent 0, #000 0) bottom left;
  background-size: 50% 50%;
  background-repeat: no-repeat;
  margin:0 auto;
}

わかる方いらっしゃいましたら教えていただきたいです。
よろしくお願いします。

Comments

[recal]

画像なら最初から切ってしまえばいいんじゃないですか？

Answer 1

.target {
  clip-path: polygon(1rem 0px, calc(100% - 1rem) 0px, 100% 1rem, 100% calc(100% - 1rem), calc(100% - 1rem) 100%, 1rem 100%, 0px calc(100% - 1rem), 0px 1rem);
}

【clip-path - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/clip-path

Comments

[GNR]

サイトの背景に画像を設定していたので、違和感なく馴染ませることができました！
本当にありがとうございます！

Answer 2

chromeでしか確認してませんが、グラデーションで隠しました。

<div>
  <img src="https://api.lorem.space/image/movie?w=300&h=150" alt="">
</div>

div {
  position: relative;
  color: #fff;
  display: grid;
  place-items: center;
  width: 300px;
  height: 150px;
}
div::before {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  z-index:2;
  background-image: linear-gradient(45deg, #fff 10px, transparent 10px),
    linear-gradient(135deg, #fff 10px, transparent 10px),
    linear-gradient(225deg, #fff 10px, transparent 10px),
    linear-gradient(315deg, #fff 10px, transparent 10px);
}

Comments

[GNR]

ご回答ありがとうございます！
非常に勉強になりました！