1

以下のリボンの CSS3 コードを探しています。

これはこのように見えるはずで、サイズは幅 30px、高さ 44px です。サンプル用に提供するコードや、JS フィドルなどから動作するものはありません。

上揃え http://www.kerrydeaf.com/pink.png

私はこれを見ましたhttp://css-tricks.com/snippets/css/ribbon/

でも横向きです。上記のような縦型を探しています。

更新 12 月 10 日月曜日午後 2 時 30 分: @Zoltan Toth - 以下のように、コメントに JS Fiddle を含めました。(ここに JS フィッフルを投稿することは許可されていません)。

4

3 に答える 3

9

あなたはこのようなことを試すことができます-デモ

HTML

<div> i </div>

CSS

div {
    background: deeppink;
    height: 30px;
    width: 30px;
    position: relative;
    text-align: center;
    font: 600 16px sans-serif;
    color: white;
    line-height: 27px;
    border: 0;
}

div:after {
    content: "";
    position: absolute;
    bottom: -18px;
    left: 0;
    height: 0;
    width: 0;
    border: solid 15px deeppink;
    border-bottom-color: transparent;
}

div:hover {
    background: purple;
}

div:hover:after {
    border-color: purple;
    border-bottom-color: transparent;
}​
于 2012-12-08T21:12:41.783 に答える
0

DIV 内に配置してから、div 内で次のようにします。

div
{
transform:rotate(90deg);
-ms-transform:rotate(90deg); /* IE 9 */
-moz-transform:rotate(90deg); /* Firefox */
-webkit-transform:rotate(90deg); /* Safari and Chrome */
-o-transform:rotate(90deg); /* Opera */
}

または、Canvas を使用して好きなように描画することもできます。そのために CSS2 のトリックは必要ありません。

于 2012-12-08T21:10:08.893 に答える