変更CCSリボンコード/スタイル

Question

私は、このリボンコードを使用しようとしています

私はそれはしかし、それは単なるテキストの長い行に適合しないnicevに見えると思います リンクは

を含む（一部の発電機のサイトにあります）私はそこに展示する必要があります（前会長）。

これは私がCSSリボンエフェクトを使用しようとしているのは初めてのことですが、paramsが（左にいくらか）上に移動するように私の頭を包んでいるようには思えません。表示したい長いテキストを表示します。

• 右端のリボン（ちょうど明確になる）です。左に少し動かす必要があります。長いテキストを表示するには「長く」します。ここで

私のコードです：フォントは '少しjanky'

に見える

/* CSS ribbon styles */ 
/* http://www.cssportal.com/css-ribbon-generator/ */ 

.ribbon { 
    position: absolute; 
    right: -5px; top: -5px; 
    z-index: 1; 
    overflow: hidden; 
    width: 75px; height: 75px; 
    text-align: right; 
} 
.ribbon span { 
    font-size: 10px; 
    font-weight: bold; 
    font-size:10px; 
    color: #FFF; 
    text-transform: uppercase; 
    text-align: center; 
    line-height: 20px; 
    transform: rotate(45deg); 
    -webkit-transform: rotate(45deg); 
    width: 100px; 
    display: block; 
    background: #79A70A; 
    background: linear-gradient(#2989d8 0%, #1e5799 100%); 
    box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1); 
    position: absolute; 
    top: 19px; right: -21px; 
} 
.ribbon span::before { 
    content: ""; 
    position: absolute; left: 0px; top: 100%; 
    z-index: -1; 
    border-left: 3px solid #1e5799; 
    border-right: 3px solid transparent; 
    border-bottom: 3px solid transparent; 
    border-top: 3px solid #1e5799; 
} 
.ribbon span::after { 
    content: ""; 
    position: absolute; right: 0px; top: 100%; 
    z-index: -1; 
    border-left: 3px solid transparent; 
    border-right: 3px solid #1e5799; 
    border-bottom: 3px solid transparent; 
    border-top: 3px solid #1e5799; 
} 

私はこれらの更新されたスタイルを使用して、それはやや大きめ作っている間..

• 私は思えカント前/後のエフェクトを取得して、他のスタイルを調整したので調整します。更新

：

.ribbon { 
    position: absolute; 
    right: -5px; top: -5px; 
    z-index: 1; 
    overflow: hidden; 
    width: 275px; 
    height: 275px; 
    text-align: right; 
} 

/* new bigger attempt */ 
.ribbon span { 
    background: rgba(0, 0, 0, 0) linear-gradient(#2989d8 0%, #1e5799 100%) repeat scroll 0 0; 
    box-shadow: 0 3px 10px -5px rgb(0, 0, 0); 
    color: #fff; 
    display: block; 
    font-size: 10px; 
    font-weight: bold; 
    line-height: 20px; 
    position: absolute; 
    right: -85px; 
    text-align: center; 
    text-transform: uppercase; 
    top: 32px; 
    transform: rotate(45deg); 
    width: 250px; 
} 

Answer 1

はこれを試してみてください。私は、.ribonの幅/高さ/上/左と.ribonの上/右を更新しました。

.box { 
 
    width: 200px; 
 
    height: 200px; 
 
    background: gainsboro; 
 
    position: relative; 
 
} 
 

 

 
/* CSS ribbon styles */ 
 

 

 
/* http://www.cssportal.com/css-ribbon-generator/ */ 
 

 
.ribbon { 
 
    position: absolute; 
 
    right: -6px; 
 
    top: -5px; 
 
    z-index: 1; 
 
    overflow: hidden; 
 
    width: 115px; 
 
    height: 115px; 
 
    text-align: right; 
 
} 
 

 
.ribbon span { 
 
    font-weight: bold; 
 
    font-size: 10px; 
 
    color: #FFF; 
 
    text-transform: uppercase; 
 
    text-align: center; 
 
    line-height: 20px; 
 
    transform: rotate(45deg); 
 
    -webkit-transform: rotate(45deg); 
 
    width: 125px; 
 
    display: block; 
 
    background: linear-gradient(#2989d8 0%, #1e5799 100%); 
 
    box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1); 
 
    position: absolute; 
 
    top: 28px; 
 
    right: -24px; 
 
} 
 

 
.ribbon span::before { 
 
    content: ""; 
 
    position: absolute; 
 
    left: 0px; 
 
    top: 100%; 
 
    z-index: -1; 
 
    border-left: 3px solid #1e5799; 
 
    border-right: 3px solid transparent; 
 
    border-bottom: 3px solid transparent; 
 
    border-top: 3px solid #1e5799; 
 
} 
 

 
.ribbon span::after { 
 
    content: ""; 
 
    position: absolute; 
 
    right: 0px; 
 
    top: 100%; 
 
    z-index: -1; 
 
    border-left: 3px solid transparent; 
 
    border-right: 3px solid #1e5799; 
 
    border-bottom: 3px solid transparent; 
 
    border-top: 3px solid #1e5799; 
 
}

<div class="box"> 
 
    <div class="ribbon"><span>PAST PRESIDENT</span></div> 
 
</div>