0

次のように、台形で塗りつぶされた画像を作成したいと思います。

例

回す必要はありません。写真を傾ける必要はありません。transform: matrix動作しません！

解決策は、次の 2 つのコードを接続するだけでほぼ見つかります。

background-image:url("http://3.bp.blogspot.com/-D9i-wqTIjFw/T5x_51p2rJI/AAAAAAAABLs/VytuZcJGNuY/s400/indahnya.jpg");

この良いコードに：

.myShape {
width: 0;
height: 50px;
border-left: 50px solid red;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;

}

4

2 に答える 2

2

CSSを使えば、このような形を作ることができます。次のようなことを試してください：

.myShape {
    width: 0;
    height: 50px;
    border-left: 50px solid red;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
}

jsFiddle デモ

于 2013-05-29T16:27:12.903 に答える