0

divマスクの角を丸くして、その子のコンテンツにしようとしています。この質問のおかげでできましたが、子供が変形するとうまくいきません。

したがって、このhttp://jsfiddle.net/ut2DW/は Firefox と Safari (!) では適切に機能しますが、transforms プロパティを削除 (およびマージンを調整) しない限り、Chrome や Opera では機能しません。

CSS (詳細は JSFiddle にあります)

div {
    position: absolute;
}

a {
    display: block;
    overflow: hidden;
    -webkit-border-radius: 0 0 20px 0;
            border-radius: 0 0 20px 0;
}

span {
    display: block;
    transform: rotate(45deg);
}

HTML

<div>
    <a href="#">
        <span></span>
    </a>
</div>

（少なくとも）Chromeで動作させるにはどうすればよいですか？（ああ、私は画像を作りたくありません！）

ありがとう！

4

1 に答える 1

0

私はそれが原因だと思いますtransform: rotate(45deg);

なぜそれが機能しないのかわかりません..削除すると、希望どおりに機能します..

回転の代わりに背景画像を追加することをお勧めします

span {
    display: block;
    margin: 22px 0 0 22px;
    width: 100px;
    height: 100px;
    background: #000 url(../img/black-triangle.png) no-repat;
}​
于 2012-10-30T19:11:05.853 に答える