border のプロパティを使って三角形を生成し、 :before擬似要素 / :after擬似要素で
対象要素内の先頭 / 末尾に、これを追加します。そして
見出し本体の適切な位置に配置して、リボンを表現します。
CSS リボン風見出し サンプル
容量1GB、月額125円、高性能なサーバが日本最大級のバックボーンに直結。
さくらのレンタルサーバ。
サンプルソース
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>リボンのような見出しをCSSで表示</title>
<style>
/* リボン風見出し 本体 */
.ribbonBox0{
position: relative; /* 相対配置（相対位置）*/
width: 440px;
line-height: 26px; /* 行の高さ */
margin: 50px;
padding: 10px 0px;
background: #eb225e;
font-size: 20px;
font-weight: bold;
color: #ffff00;
text-align: center;
box-shadow: 0 8px 25px -10px #f562dd;/ * ボックスに影 */
}
.ribbonText{ /* テキスト部分 */
margin: 0 15px;
padding: 5px;
border-top: 1px dashed #99ff99;
border-bottom:1px dashed #99ff99;
}
.ribbonText span{
color:#fff;
}
.ribbonText span:before{ /* テキスト部分に ★ マーク */
content: "★";
position: absolute;
color:#99ff99;
font-size: 10px;
top:-2px;left:10px;
}
.ribbonText span:after{ /* CSS疑似要素 :before / :after */
content: "★";
position: absolute;
color:#99ff99;
font-size: 10px;
bottom:-2px;right:10px;
}
/* ここから本番 リボン飾り */
/* 左右の凹み(逆)三角形 */
.ribbonBox0:before, .ribbonBox0:after{ /* 左右の凹み三角,共用コード */
content: "";
position: absolute; /* 絶対配置 */
z-index: -1;/* 要素の重なり順序 */
bottom: -20px; /* 下辺からの距離 top,left,bottom,right 親要素からの距離*/
width: 0; height: 0;
border: 30px solid #ec4477; /* ボーダー: 幅 実線 色 */
}
.ribbonBox0:before{ /* 左の凹み三角 */
left: -40px; /* 左辺からの距離 */
border-left-color: transparent; /* 左ボーダーを透明に */
}
.ribbonBox0:after{ /* 右の凹み三角 */
right: -40px; /* 右辺からの距離 */
border-right-color: transparent;/* 右ボーダーを透明に */
}
/* 左右の折り返し三角 */
.ribbonText:before, .ribbonText:after{ /* 左右の折り返し三角,共用コード */
content: "";
position: absolute;/* 絶対配置 */
width: 0; height: 0;
bottom: -20px;/* 下辺からの距離 */
}
.ribbonText:before{ /* 折り返し三角 左 */
left: 0;/* 左辺からの位置 */
border-top: 20px solid #690629;
border-left: 20px solid transparent;
}
.ribbonText:after{ /* 折り返し三角 右 */
right: 0;/* 右辺からの距離 */
border-top: 20px solid #690629;
border-right: 20px solid transparent;
}
</style>
</head>
<body>
<div class="ribbonBox0">
<p class="ribbonText">キャンペーン期間<span> 2020/07/24 </span>まで</p>
</div>
</body>
</html>
リボン飾り 左右の凹み(逆)三角形 作成
幅、高さ、共に’0’のボックスにボーダーを付けます。
四辺のボーダーの幅は’30px’で、色は解りやすくする為に、変えてあります。
そして、左ボーダーを透明にすると、左凹み(逆)三角が、出来上がりです。
width: 0; height: 0; // ボックスの幅、高さ ；
border: 30px solid #ec4477; // ボーダー： 幅30px 実線 色 ；
border-left-color: transparent; // 左ボーダーを透明 ；
右凹み(逆)三角は、右ボーダーを透明にします。
border-right-color: transparent; // 右ボーダーを透明 ；
リボン飾り 左右の折り返し三角形 作成
幅、高さ、共に’0’のボックスにボーダーを付けます。
左側の折り返し三角形は、’上、左 ’ ボーダーに幅 ’20px’を設定します。
’下、右 ’ は設定しないので表示されません。// border-style のデフォルト値は noneです。
そして、左ボーダーを透明にします。
width: 0; height: 0; // 幅、高さ、共に’0’のボックスにボーダーを付けます。
border-top: 20px solid #690629;// 上ボーダー ： 幅20px 実線 色 ；
border-left: 20px solid transparent;// 左ボーダーを透明 ；
右側の折り返し三角形は、’上、右 ’ ボーダーに ’20px’を設定します。
border-top: 20px solid #690629;// 上ボーダー ： 幅20px 実線 色 ；
border-right: 20px solid transparent;// 右ボーダーを透明 ；
三角形を CSS で作る
リボン飾り 配置
リボン風見出し 本体（親要素）に position: relative; を
各リボン飾りに position: absolute; を設定しておきます。
これで親要素を基準にして配置する事ができます。
配置位置の指定は top,left,bottom,rightプロパティで行います。
- 左の逆三角
bottom: -20px; left: -40px; - 右の逆三角
bottom: -20px; right: -40px; - 左の折り返し三角
bottom: -20px; left: 0; - 右の折り返し三角
bottom: -20px; right: 0;
:before擬似要素 :after擬似要素
- ★月々100円（税抜）からオンラインショップを運営！
独自SSL・高機能カート・クレジット決済が簡単導入
- コロリポプラン 詳細はこちら
- WordPressが簡単・すぐに使える『レンタルサーバーheteml(ヘテムル)』
- CSS positionプロパティ
- marginプロパティ
- border-styleプロパティ
- paddingプロパティ ボックスの内側の余白
- text-align プロパティ
- line-heightプロパティ 行の高さを指定
- z-indexプロパティ テーブル（表）のセルを重ね、ずらして表示します。
- CSS疑似要素 :before / :after
- スタイルシートだけでポップアップメニュー、補足説明文を表示します。
- CSSで作る吹き出しボックス,サンプル
- スタイルシート css を使った横並びリストメニュー
- スタイルシート クラス名の取得、付け替え
- 要素のID名を動的に換えてスタイルを変更
- 文字の色,背景色の色の組み合わせのチェック
- Web Safeカラー 216色
