17

<div>下の写真のような三角形を切り取ることは可能ですか？

背景は実際には色だけではありませんが、私の場合はぼやけた写真であるため、緑<div>を茶色の三角形の画像で単純に覆うことはできません. この効果を達成するための他の CSS の方法はありますか? ありがとう。

divカットの例

4

4 に答える 4

21

それの錯覚は可能です: http://jsfiddle.net/2hCrw/4/

テスト済み: PC および iPad 上の IE 9、10、Firefox、Chrome、Safari。

  • ::beforeおよび::after疑似要素は、それぞれ三角形の辺を提供するために歪んでいます。
  • 歪んだ疑似要素のクリッピングに使用されるラッパー。外側のコンテナをラッパーとして使用することで、これを回避できる場合があります。
  • 要素は、境界線、影などでスタイルを設定できます。
  • 下にあるものはすべて正しく表示されます。

ボーダーとドロップ シャドウを使用したデモ: http://jsfiddle.net/2hCrw/8/

このデモでは、要素と疑似要素の間のギャップ (ドロップ シャドウ ブリードまたはサブピクセル レンダリング動作のいずれかによって引き起こされる) を防ぐために、Retina を搭載した iPad 用の微調整も追加します。

<div id="wrapper">
    <div id="test">test</div>
</div>


#wrapper {
    overflow: hidden;
    height: 116px;
}
#test {
    height: 100px;
    background-color: #ccc;
    position: relative;
}
#test::before {
    content:"";
    position: absolute;
    left: -8px;
    width: 50%;
    height: 16px;
    top: 100px;
    background-color: #ccc;
    -webkit-transform: skew(-40deg);
    -moz-transform: skew(-40deg);
    -o-transform: skew(-40deg);
    -ms-transform: skew(-40deg);
    transform: skew(-40deg);
}
#test::after {
    content:"";
    position: absolute;
    right: -8px;
    width: 50%;
    height: 16px;
    top: 100px;
    background-color: #ccc;
    -webkit-transform: skew(40deg);
    -moz-transform: skew(40deg);
    -o-transform: skew(40deg);
    -ms-transform: skew(40deg);
    transform: skew(40deg);
}

別の方法として、透明な画像を使用して、その上の要素を疑似要素で「拡張」することができます。要素から切り取られた円に関する同様の質問に回答し、IE7 までのサポート オプションを示します (CSS での真のクリッピング/マスキングの将来のオプションと同様に)。

于 2013-10-06T22:05:59.117 に答える
1

あなたにも少しドロップ シャドウがあるように見えますが<div>、三角形はそれを尊重する必要があると思います。

CSS は現在、これを直接実現する方法を提供していません。<div>1 つの方法は、三角形の切り抜きを含むの緑色の下部領域のイメージを作成し(Photoshop などを使用)、元の の<div>内側の背景として設定し、元<div>の の外側に配置すること<div>です。

うまくいけばアイデアを説明する JS Fiddle の例を次に示します。

于 2013-10-06T21:58:40.303 に答える