最新ブラウザのみでいいのですが、
画像を台形にトリミングしたいのですが、
IEもできる方法わかりませんでしょうか?
clip-pathやsvgなどでやっていたのですが、IEだけどうしても対応できず・・・
border-left:4px solid transparent;
などでそのように見せることはできるのですが、
できれば、ちゃんとトリミングを行いたいです。
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
下記のような質問は推奨されていません。
- 質問になっていない投稿
- スパムや攻撃的な表現を用いた投稿
適切な質問に修正を依頼しましょう。
回答2件
3
skew()
でやる方法もありますね
html
1<div class="trapezoid w"> 2 <div class="trapezoid c"> 3 <img src="https://placehold.jp/300x200.png"> 4 </div> 5</div>
css
1.trapezoid, 2.trapezoid >img{ 3 display: inline-block; 4 transform-origin: 0 100%; 5 overflow: hidden; 6} 7.trapezoid.w{ 8 transform: skew(-15deg); 9} 10.trapezoid.c{ 11 transform: skew(30deg); 12} 13.trapezoid >img{ 14 transform: skew(-17deg);/*歪み修正のため,-2deg*/ 15}
html
1<div class="trapezoid"> 2 <img src="https://placehold.jp/300x200.png"> 3</div>
css
1.trapezoid, 2.trapezoid >img{ 3 display: inline-block; 4 transform-origin: 0 100%; 5 overflow: hidden; 6} 7.trapezoid{ 8 transform: skew(15deg); 9} 10.trapezoid >img{ 11 transform: skew(-15deg);/*こちらは歪みなしのようなのでそのまま*/ 12}
Win8, IE 11, Firefox 61で確認
投稿2018/08/29 07:38
総合スコア1284
1
ベストアンサー
SVGのpolyline
とclipPath
で、こんな感じでどうでしょう?
VirtualBoxですが、Win7 IE11で確認済みです。
svg
1 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 2 <clipPath id="cut-off-bottom"> 3 <polyline points="0,0 100,0 150,100 0,100" stroke="black" stroke-width="1" fill="none" /> 4 </clipPath> 5 <image width="150" height="150" xlink:href="https://placehold.jp/150x150.png" clip-path="url(#cut-off-bottom)" ></image> 6 </svg>
投稿2018/08/29 05:45
総合スコア3402
下記のような回答は推奨されていません。
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
このような回答には修正を依頼しましょう。
回答へのコメント
関連した質問
Q&A
受付中
pythonで画像を楕円形にトリミングしたい
回答3
クリップ1
更新
2022/01/12
Q&A
解決済
TypeError:Expected Ptr<cv::UMat> for argument '%s'の対処法
回答1
クリップ0
更新
2019/11/26
Q&A
解決済
スプレッドシートの画像編集【最前面/最背面へ移動】【トリミング方法】
回答1
クリップ0
更新
2020/03/09
Q&A
解決済
Go言語での画像処理に使えるモジュールの存在について
回答2
クリップ0
更新
2021/08/16
Q&A
解決済
Visual Studioで単体で動作するexeファイルの作成方法
回答2
クリップ2
更新
2022/01/12
Q&A
解決済
平行四辺形に画像をトリミングしたい。
回答2
クリップ0
更新
2022/01/16
Q&A
解決済
【ギャラリー】画像を横スクロールさせたい
回答1
クリップ0
更新
2017/03/03
Q&A
解決済
HTML CSSで縦横サイズがバラバラな画像を自動トリミングしてサムネイルにしたい
回答4
クリップ5
更新
2015/05/01
同じタグがついた質問を見る
JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。
CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
2018/08/31 12:44