画像に斜めのエッジを付けることはできますか？

Question

私はエッジが傾いているコミックブックのパネルエフェクトを作成しようとしています。私は何を得ようとしているのかの実例を示しました。これはCSSでできますか？

Answer 1

はい、これはclip-pathプロパティを使用してCSSで行うことができます。

polygon()という値では、あなたが望むどんな形状でも実現できます。なお、このように使用される：上記の例で

clip-path: polygon(a, b, c, [...]) 

各文字パスの点の座標、および各点はXとYの値を有し、左上から開始表します。例えば

、これ：

clip-path: polygon(50% 0%, 0% 100%, 100% 100%); 

は...最初のポイントは、50％のXと0％、そう上部中央にあることを意味します。 2番目のポイント（0％100％）は0％Xと100％Yになりますので、左下になります。最後の点（100％100％）は、100％Xと100％Yになります。つまり、右下です。これは三角形になります。

Clippyはあなたのためにclip-pathを生成する素敵なツールです。あなたがそれらを必要な場所にドラッグアンドドロップし、あなたのために生成するclip-pathをコピーすることができます。

ブラウザの互換性はis not very goodであることに注意してください。

Answer 2

これはCSSクリッピングで行うことができますが、ブラウザの互換性が問題になることがあります。詳しくは、下のリンクをご覧ください。

https://www.viget.com/articles/angled-edges-with-css-masks-and-transforms

Answer 3

あなたはSVG

.element { 
 
    text-align: center; 
 
} 
 
svg { 
 
    width: 40vw; 
 
    overflow: visible; 
 
} 
 
.st0 { 
 
    fill: #FFFFFF; 
 
    stroke: #000000; 
 
    stroke-miterlimit: 10; 
 
} 
 
.st1 { 
 
    fill: white; 
 
    stroke: #000000; 
 
    stroke-miterlimit: 10; 
 
} 
 
polygon { 
 
    transition: all 0.3s ease-in; 
 
    transform-origin: center; 
 
} 
 
polygon:hover { 
 
    transform: scale(1.1); 
 
}

<div class="element"> 
 
    <svg viewBox="0 0 250 400" style="enable-background:new 0 0 250 400;"> 
 
    <polygon class="st0" points="12.111,175.777 12.111,9.111 239.889,9.111 239.889,80.222 " /> 
 
    <polygon class="st0" points="239.889,257.444 239.889,86.889 12.111,182.444 12.111,217.444 " /> 
 
    <polygon class="st1" points="106.84,241.17 106.84,393.56 12.11,393.56 12.11,225.22 " /> 
 
    <polygon class="st1" points="239.89,263.56 239.89,393.56 118.05,393.56 118.05,243.05 " /> 
 
    </svg> 
 
</div>