6

これは基本的に私が達成したいことです --> https://jsfiddle.net/tak1pyt7/1/

.clip {
  width: 500px;
  height: 500px;
  -webkit-clip-path: polygon(100% 0, 100% 81%, 82% 100%, 0 100%, 0 0);
  clip-path: polygon(100% 0, 100% 81%, 82% 100%, 0 100%, 0 0);
}
body {
  background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
  height: 100%;
  width: 100%;
}
<body>
  <div class="clip">
    <img src="http://lorempixel.com/600/600/" width="100%" height="100%" />
  </div>
</body>

私には解決策がありますが、フィドルのコードには次のようなさまざまな問題があります。

  • クリップ パスがサポートされていないため、IE または Edge では機能しません。
  • クリップ パスは、Firefox の CSS シェイプをサポートしていません。Firefox で機能させる必要がある場合は、インライン svg を指定する必要があります。
  • インライン svg も提供しようとしましたが、私の要件を解決しない独自の問題があります。コンテナの高さと幅に関係なく、カット寸法を同じにする必要があります。現在、画像をカットするインライン svg を使用すると、高さと幅の変化に応じて寸法が変化します。つまり、カットはレスポンシブです。カットの静的寸法が必要です。

上記のソリューション以外に、コーナーをカットしたdivを作成するのに役立つソリューションをたくさん検索しましたが、後ろにしっかりした背景がないため、カット自体が透明です。

調査したその他のソリューション

CSS3 グラデーション サンプルの使用

  • サンプル --> http://jsfiddle.net/spdawson/3Tc8S/light/
  • 投稿の冒頭で提供したフィドルなど、領域の高さと幅全体を占めるコンテンツがある場合は機能しません。

CSS ボーダーの使用

  • サンプル --> http://jsfiddle.net/spdawson/HhZQe/light/

  • カットを作成する必要があるコンテナには、私のデザインには当てはまらない無地の背景色が含まれている必要があるため、うまくいきません。

jQuery プラグインの使用 ( http://jquery.malsup.com/corner/ )

  • サンプルコード --> http://jsfiddle.net/spdawson/nxnCD/light/

  • 私の要件を考慮すると、そうではない無地の背景色が必要です。代わりに背景として画像があります。

機能するが非常にハッキーなソリューション

  • サンプル --> http://jsfiddle.net/26v7pfLb/

  • 現在、高さと幅が固定されているコンテナにこのソリューションを使用していますが、コンテナの幅が静的で高さが動的であるページがアプリにあります。その場合、ハッキングを実装するのはかなり難しく、このソリューションを個人的に使用するのは非常に奇妙に思えます。

  • CSSでこの種のソリューションを実装するために、よりエレガントでクリーンなものを見つけようとしています

どんなポインタも役に立ちます。

4

2 に答える 2

4

この質問で説明したアプローチを使用できます:回転コンテナーを使用して CSS を使用してコーナーをカットします。overflow:hidden;

あなたの例では（要素内に画像を表示したいので）、次のようにコンテンツを「回転解除」する必要があります：

.clip {
  margin: -150px 0 0 -150px;
  display: inline-block;
  transform: rotate(-45deg);
  overflow: hidden;
}
img {
  margin: 150px 150px 0 150px;
  display: block;
  transform: rotate(45deg);
}
body{background:url(http://lorempixel.com/output/nature-q-g-640-480-7.jpg);background-size:cover;}
<div class="clip">
    <img src="http://lorempixel.com/600/600/" />
</div>

このソリューションでは、マージンまたは絶対配置による配置も必要です。

于 2015-09-03T11:21:25.097 に答える
2

CSS ソリューション:

機能するが非常にハッキーなソリューション

使用するソリューションは、現時点 (2015 年 9 月) で最適です。これはハックではなく、単純な 2D 回転であり、IE でも動作します。

IE 以外のブラウザーでの CSS マスキングに関する最良の記事は、このページにあります。これは、完全にはサポートされていないhtml foreignObject要素を持つ SVG を使用します。

CSSでこの種のソリューションを実装するために、よりエレガントでクリーンなものを見つけようとしています

CSS ソリューションは、css-maskとclip-pathelegant and cleanが有効になる数年後に利用できるようになります。

Javascript ソリューション:

Javascript を使用して画像の一部を透明にするよりも、HTML Canvas 要素を使用して画像データを保存できます。

次の例では、右下の三角形を透明にします。問題があります。画像は同じドメインにある必要がありますが、これは StackOverflow では当てはまりません (base64 でエンコードすることもできません)。

Liveweave プレイグラウンドで動作するようにしました。開いて、画像が読み込まれ、スクリプトが実行されるのを待ちます (画像は巨大です)。

ソースコードも以下にあります。

// get the image, the image MUST BE LOCAL
var img = document.getElementById("your-image");
var height = img.offsetHeight;
var width = img.offsetWidth;
// create and customize the canvas
var canvas = document.createElement("canvas");
canvas.width = width;
canvas.height = height;

// get the context
var ctx = canvas.getContext("2d");
// draw the image into the canvas
ctx.drawImage(img, 0, 0);

// get the image data object
var image = ctx.getImageData(0, 0, width, height);

// get the image data values 
var imageData = image.data,
	length = imageData.length;

// every fourth value is Alpha channel
// lets make bottom right triangle transparent
for(var i=3; i<length; i+=4){  
	// for calculations we need to know current pixel position on image
	// we define pixel left, top, right and bottom relative to the image rectangle
	// first index is 1, first pixel for width=4: left=1, right=4
	var pixel = (i+1)/4;
	var left = (pixel-1)%width+1;
	var top = Math.floor(pixel/width);
	var right = width-left+1;
	var bottom = height-top+1;
	// it is easy now to find pixel in bottom right rectangle:
	if( (right+bottom)<=30 ) {
		// make this pixel transparent
		imageData[i] = 0;
	};
}

// after the manipulation, reset the data
image.data = imageData;

// and put the imagedata back to the canvas
ctx.putImageData(image, 0, 0);

img.src = canvas.toDataURL();
<p>The image must be on same domain :(</p>    
<img id="your-image" src="http://i.stack.imgur.com/PKxQk.png"/>

使用する (使用できない) 画像:

ここに画像の説明を入力

PHP ソリューション:

上記と同様に、iMagickライブラリを使用して画像の一部を透明にすることができます。iMagick maskを使用するか、ピクセルのアルファを直接変更できます。この回答で例を見つけることができます。

于 2015-09-03T12:50:20.583 に答える