css - 背景を表示するために画像の角をクリッピングまたは面取りする

Question

画像の角を45度カットしたデザインです。とりあえず、不透明な白でコーナーを「カット」した透明な背景画像が設定された絶対配置スパンでマスクすることで実現します。これは理想とはかけ離れています。1 つ目は追加のスパンのため、2 つ目は画像の背景が均一な白ではないためです。

後で透明な PNG を生成するつもりですが、画像が写真であることを考えると、よりエレガントで、JPEG と CSS を使用する方が帯域幅の負荷が少なくなります。新しい CSS マスクプロパティは有望に思えましたが、私が理解しているように、要素の背景に「マスクスルー」する機能はありませんね。

私の質問は、私が認識していない新しい CSS プロパティがあり、これを可能にするものはありますか?

score 6 · Accepted Answer

変換の使用 (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);    
}

score 1 · Accepted Answer

このブログ投稿 (およびそれに対応する jsFiddle) をチェックしてください。ここでは、著者が複数の背景グラデーションを使用して、あなたがやりたいと思うことを実現しています。

http://lea.verou.me/2011/03/beveled-corners-negative-border-radius-with-css3-gradients/

div {
    background: #c00; /* fallback */
    background:
        -moz-linear-gradient(45deg,  transparent 10px, #c00 10px),
        -moz-linear-gradient(135deg, transparent 10px, #c00 10px),
        -moz-linear-gradient(225deg, transparent 10px, #c00 10px),
        -moz-linear-gradient(315deg, transparent 10px, #c00 10px);
    background:
        -o-linear-gradient(45deg,  transparent 10px, #c00 10px),
        -o-linear-gradient(135deg, transparent 10px, #c00 10px),
        -o-linear-gradient(225deg, transparent 10px, #c00 10px),
        -o-linear-gradient(315deg, transparent 10px, #c00 10px);
    background:
        -webkit-linear-gradient(45deg,  transparent 10px, #c00 10px),
        -webkit-linear-gradient(135deg, transparent 10px, #c00 10px),
        -webkit-linear-gradient(225deg, transparent 10px, #c00 10px),
        -webkit-linear-gradient(315deg, transparent 10px, #c00 10px);
}

div, div.round {
    background-position: bottom left, bottom right, top right, top left;
    -moz-background-size: 50% 50%;
    -webkit-background-size: 50% 50%;
    background-size: 50% 50%;
    background-repeat: no-repeat;
}

css - 背景を表示するために画像の角をクリッピングまたは面取りする

2 に答える 2

変換の使用 (CSS3 ソリューションのみ)

これがフィドルです。

Related

Reference