0

次のCSSコードを使用して三角形を作成しました。

    width: 0; 
    height: 0; 
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;      
    border-top: 60px solid #000;

＃000で述べたように、この境界線の背景色は黒ですが、この三角形の内側に画像が必要です。background-imageプロパティを使用してCSSに別の行を追加しようとしましたが、これを行うと、長方形の背景ではなく、正方形の背景に完全な画像が表示されます。

必要な画像で三角形を表示するにはどうすればよいですか。

4

3 に答える 3

0

WebKit をサポートしていないブラウザーを除外しても問題ない場合は、-webkit-mask プロパティを使用してマスクを調べて、画像を三角形にマスクできるようにしてください。

それらに関する良い記事は次のとおりです。http://css-tricks.com/webkit-image-wipes/

于 2012-12-16T20:28:08.410 に答える
0

純粋な CSS でこれを実行し、クロス ブラウザーで動作させることはできないと思います。できることは、中央に透明な三角形があるマスキング画像を他の画像の上に配置することです。側面がページと同じ色に見えるようにすると、画像が三角形であるかのように見えます。

キャンバスを使用して、画像を変更して三角形にすることもできます。

CSS のサポートに関しては、いくつかのマスク設定があります。Safari と Chrome をサポートする場合のみ、-webkit-maskを使用できます。Firefox、Safari、Chrome、および Opera では、 maskを使用できます。ただし、IE のサポートはありません。

于 2012-12-16T15:38:25.200 に答える
0

この例のようなことはできますか?

スタイルシート:

div {
    width: 0; 
    height: 0; 
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;      
    border-top: 60px solid #000;
    position: relative;
}
div::after {
    content: "";
    background: url('http://lorempixel.com/40/40/'); no-repeat;
    width: 40px;
    height: 40px;
    position: absolute;
    top: -60px;
    left: -20px;    
}​
于 2012-12-16T15:40:53.267 に答える