web-dev-qa-db-ja.com

CSSで画像を斜めにカットする

CSSを使用して画像またはコンテナーの一部を斜めに切り取るには？

切り取る必要がある部分は三角形の形をしています

Example of image

具体的には：上記の画像が画像の場合、黄色ではなく青い部分を切り取る必要があります

HTMLは次のようになります。

<figure>
 <img src="img_pulpit.jpg" alt="The Pulpit Rock">
</figure>

または：

<div class="container">
  content
</div>

私自身の調査からこれを行う方法はたくさんありますが、それらのほとんどはハックなので、最良のアプローチを探しています

最小ブラウザーサポート：IE11、最新のWebkitなど.

htmlcsscss-shapes
15
Doff3n

CSS3を使用する-clip-pathとpolygonはこのようになります。任意のパスを指定できます。

img {
  width: 100px;
  height: 100px;
  -webkit-clip-path: polygon(0 0, 0 100px, 100px 80px, 100px 0);
  clip-path: polygon(0 0, 0 100px, 100px 80px, 100px 0);
}
<img src="https://picsum.photos/id/0/100/100">

http://jsfiddle.net/r3p9ph5k/

いくつかの追加ビットについては、たとえば、 これ 。また、IEの詳細については、 this を参照してください。

12
Roope

pseudo element、 と組み合わせ overflow:hidden;

結果

enter image description here

div {
  height: 300px;
  width: 300px;
  position: relative;
  overflow: hidden;
  background: url(http://placekitten.com/g/300/300);
}
div:after {
  content: "";
  position: absolute;
  top: 93%;
  left: 0;
  height: 100%;
  width: 150%;
  background: red;
  -webkit-transform: rotate(-5deg);
  -moz-transform: rotate(-5deg);
  transform: rotate(-5deg);
}
<div></div>
5
jbutler483

これは少し汚いですが...ここにアイデアがあります：

[〜＃〜] html [〜＃〜]：

body {
  background: #eee;
}
figure {
  display: inline-block;
  overflow: hidden;
  padding-left: 20px;
  margin-left: -20px;
  padding-top: 50px;
  margin-top: -50px;
  padding-right: 20px;
  margin-right: -20px;
  height: 200px;
  transform: rotate(-10deg);
}
figure img {
  transform: rotate(10deg);
}
<figure>
  <img src="http://placehold.it/502x260&text=Random+Image" />
</figure>

注：別の方法として、疑似要素を使用して画像をマスクすることもできますが、これにより、透けて見えるはずの実際の「カット」が生成されません。

4
bob6664569

ただのアイデア：

[〜＃〜] html [〜＃〜]

<figure>
    <img src="http://placehold.it/500x500" alt="">
</figure>

[〜＃〜] css [〜＃〜]

figure {
    position: relative;
    display: inline-block;
    overflow: hidden;
    padding: 0;
    line-height: 0;
}

figure:after {
    content: '';
    position: absolute;
    width: 200%;
    height: 100%;
    left: 0;
    bottom: -91%;
    background: red;
    -webkit-transform: rotate(355deg);
    transform: rotate(355deg);
}

デモ

購入前に試す

1
insertusernamehere

- http://cssplant.com/clip-path-generator を使用できます。

これは単なる「ダーティソリューション」です。最善の方法は、imgの上にsvgを配置することです。

おそらく将来的には、「clip cssプロパティ」は単なる「rect」以外の種類の形状をサポートし、このようなことができるようになるでしょう。

もう1つの「汚い方法」は、必要な背景色でimgの上にdivを配置して回転させることです。

1
Anfuca