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 | 大阪 ☁ | 吹き出し、見出し装飾 | このブログの読者になる | 更新情報をチェックする
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。