;

しんみゆ.com

群馬県高崎市在住の夫婦で日記というか、つぶやきブログしてます:しんみゆ.com

メモ:リボンみたいなデザインをcss3で

リボンサンプル

【html】
<div class="r_ribbon_box">
<div class="r_ribbon">
リボンデザイン

</div>
<div class="r_ribbon-l">
</div>
<div class="r_ribbon-r">
</div>
<div class="info">
<p>テキスト内容テキストテキストテキストテキストテキストテキストデザインサンプルです</p>
</div>
</div>

【css】
/* == リボンスタイル == */
.r_ribbon_box {
margin: 0px auto;
width: 350px;
background: #ffffc0;
-moz-border-radius: 10px; /* 角丸_MDC(Mozilla) */
-khtml-border-radius: 10px; /* 角丸 */
-webkit-border-radius: 10px; /* 角丸_ADC(Apple) */
-moz-box-shadow: 0px 0px 8px rgba(0,0,0,3); /* ぼかし */
-khtml-box-shadow: 0px 0px 8px rgba(0,0,0,3);
-webkit-boxshadoe: 0px 0px 8px rgba(0,0,0,3);
position: relative; /* 相対位置への配置となります。positionプロパティでstaticを指定した場合に表示される位置が基準位置となります。 */
z-index: 90; /* 重なりの順序を整数で指定します。0を基準として、値が大きいものほど上になります。 */
}
.r_ribbon{
background: #F93;
height: 50px;
width: 380px;
position: relative;
left: -15px; /* leftプロパティで指定するのは基準位置からの距離のみ */
top:30px;
float: left;
-moz-box-shadow: 0px 0px 4px rgba(0,0,0,0,55);
-khtml-box-shadow: 0px 0px 4px rgba(0,0,0,0,55);
-webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0,55);
z-index: 100;
}
.r_ribbon-l{
border-color: transparent #BEA00E transparent transparent;
/* インラインフレーム内の文書にこのプロパティ(値 transparent)を設定すると、インラインフレームの背景を透過させることができます。 */
border-style: solid;
border-width: 15px;
hgight: 0px;
width: 0px;
position: relative;
left: -30px;
top: 65px;
z-index: -1;
}
.r_ribbon-r{
border-color:transparent transparent transparent #BEA00E;
border-style: solid;
border-width: 15px;
height: 0px;
width: 0px;
position: relative;
left: 350px;
top: 35px;
z-index: -1;
}
.r_ribbon_info {
clear: both;
padding: 25px 10px 10px;
}

%d人のブロガーが「いいね」をつけました。

ページトップ