<< 三角形を CSS で作る | TOP | border-radiusプロパティ >>

2015年05月28日

リボンのような見出しをCSSで表示

スポンサード　リンク

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擬似要素

:before及び:after擬似要素は
対象要素内の先頭 / 末尾にコンテンツを追加します。
CSS疑似要素 :before / :after
タグ：リボンのような見出し
posted by javaScript at 20:26 | 大阪 ☁ | 吹き出し、見出し装飾 | このブログの読者になる | 更新情報をチェックする