変換の使用 (CSS3 ソリューションのみ)
次の方法には多少の不正確さがあり、「コーディング」の欠点が 2 つあります。
- 上に必要な 2 つのラッパー
img
- 画像のサイズを知る必要があります (画像のサイズが設定されている場合や、幅/高さの情報を提供するために JavaScript が使用されている場合は、必ずしも問題になるとは限りません)。
ただし、IE8以下では、うまく劣化して四角い角に戻ります.
コアのアイデアは、外側のラッパーのサイズを変更してオーバーフローを非表示にし、内側のラッパーを適切にサイズ変更、回転、および縮小して、面取りされたコーナー (オーバーフローも非表示になっています) を作成し、次に回転を逆にして拡大し、再配置することです。img
ネストされた内部が必要でした。この方法は、必要に応じてかなり適切な境界線を設定できるほど堅牢ですが、ブラウザでのそのような境界線のレンダリングは品質によって異なります.
HTML (基本フォーム)
はspan
である可能性がありdiv
ます。
<span class="chamfer">
<span>
<img src="http://placehold.it/351x151" />
</span>
</span>
CSS(基本形)
.chamfer {
overflow: hidden;
display: inline-block; /* could be "block" */
margin: 25px; /* for demo only */
/* Because of the rotations following, it seems like an odd
number in width and height worked more consistently, as
it gives a "middle" pixel by which to transform the rotation
off of
*/
width: 351px; /* width of image */
height: 151px; /* height of image */
}
.chamfer > span {
overflow: hidden;
display: inline-block; /* could be "block" */
-moz-transform-origin: 50% 50%;
-webkit-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
/* The rotation gets the chamfer angle
the scale sets the "size" of the cut
though not very precisely (exact px height
is not possible to set explicitly.
*/
-moz-transform: rotate(45deg) scale(.9);
-webkit-transform: rotate(45deg) scale(.9);
-o-transform: rotate(45deg) scale(.9);
-ms-transform: rotate(45deg) scale(.9);
transform: rotate(45deg) scale(.9);
/* top/bottom padding is image width (351px)
minus the image height (151px) = 200px divided by 2;
if the image were taller than wide, then this
would become (iH - iW) / 2 for the left/right padding
*/
padding: 100px 0;
margin-top: -100px; /* adjust for the padding */
/* the following helped "square" the item better */
width: 100%;
height: 100%;
}
.chamfer img {
display: inline-block; /* could be "block" */
-moz-transform-origin: 50% 50%;
-webkit-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
/* The rotation is reversing the wrapper rotation
to put the image horizontal again, while the scale
is the inverse of the wrapper's scale, so here
it is ( 1 / 0.9 ) = 1.11, to scale the image back
up to correct size
*/
-moz-transform: rotate(-45deg) scale(1.11);
-webkit-transform: rotate(-45deg) scale(1.11);
-o-transform: rotate(-45deg) scale(1.11);
-ms-transform: rotate(-45deg) scale(1.11);
transform: rotate(-45deg) scale(1.11);
}
HTML (2px の境界線で小さな面取り)
10px 境界バージョンの「より大きな」面取りについては、上記のフィドルも参照してください。
もちろん、すべての画像が設定されたサイズの境界線を取得している場合は、これを上記のベース html と同じように作成し、ここにあるようにクラスをオーバーライドしません。
<span class="chamfer small b2">
<span>
<img src="http://placehold.it/351x151" />
</span>
</span>
CSS (上記の基本的な CSS をオーバーライドします)
10px 境界バージョンの「より大きな」面取りについては、上記のフィドルも参照してください。
もちろん、すべての画像が設定されたサイズの境界線を取得している場合は、これらを基本 css の値にするだけで、ここで定義されているように別のクラスでは実行しません。
.b2 * {
border: 2px solid black;
}
.chamfer.b2 { /* 2px border */
width: 355px; /* 4px added for the 2px border */
height: 155px; /* 4px added for the 2px border */
}
.chamfer.b2 > span {
margin-top: -102px; /* the extra 2px is to accomodate top border of 2px */
margin-left: -2px; /* this is for the 2px left border */
}
.chamfer.small > span {
/* changed the scale for a smaller cut */
-moz-transform: rotate(45deg) scale(.96);
-webkit-transform: rotate(45deg) scale(.96);
-o-transform: rotate(45deg) scale(.96);
-ms-transform: rotate(45deg) scale(.96);
transform: rotate(45deg) scale(.96);
}
.chamfer.small img {
/* scale changed on wrapper to .96 so scale changes on
image to ( 1 / 0.96 ) = 1.042.
*/
-moz-transform: rotate(-45deg) scale(1.042);
-webkit-transform: rotate(-45deg) scale(1.042);
-o-transform: rotate(-45deg) scale(1.042);
-ms-transform: rotate(-45deg) scale(1.042);
transform: rotate(-45deg) scale(1.042);
}