CSSで文字入りの透明テープのイメージで表現してみたぁ～！？

こんな感じ！！

CSSで文字入り透明テープを創ってみた!?
左右をテープカッターで切ったように!!

　連日の酷暑に完全に負けてしまってる気がしますwww
　二日くらい前まで、エアコンのドライを28℃に設定し寝ていたのですが、連日最低気温が28℃程度という状況に、辛抱溜まらずドライで27℃に設定し直して寝るようにしているのですが、私自身は熟睡できている・・・と、思っているのに何か一日中、身体がシャキッとしませんwww
　朝の筋トレも嘗てのような1時間半～2時間・・・なんてことはどだい無理！・・・この暑さに15～20分程度でギブアップ・・・当然、お腹周りもふくよかに・・・www・・・
　身体も脳みそもフニャフニャの状態でCSSで何か創ってブログにアップしようと頑張ってみました。

• 【文字入りの透明テープ】
• こんな感じ！！
  　スタイルシートの書き方
  <style>
  div.box { /*外枠*/
      position: relative; /*要素を相対的に配置*/
      width: 200px; /*外枠の幅*/
      height: 100px; /*外枠の高さ*/
      background-color: #ffffcc; /*外枠の背景色*/
      padding: 10px; /*外枠の余白*/
  }
  span.seal { /*テープ*/
      position: absolute; /*親要素に対して絶対的配置*/
      top: 25px; /*親要素の上端からの距離*/
      left: 20px; /*親要素の左端からの距離*/
      background-color: rgba(255, 255, 255, 0.3); /*背景色と透過度*/
      border-left: dotted 3px rgba(0, 0, 0, 0.2); /*左側の線種と色と透過度*/
      border-right: dotted 3px rgba(0, 0, 0, 0.2); /*右側の選手と色と透過度*/
      box-shadow: 0px 0px 5px rgba(0, 0, 0, 1); /*ボックス周りのぼかし具合と色と透過度*/
      padding-top: 0.5em; /*文字位置(上から1/2文字分の空白)*/
      padding-bottom: 0.5em; /*文字位置(下から1/2文字分の空白)*/
      padding-left: 1em; /*文字位置(左から1文字分の空白)*/
      padding-right: 1em; /*文字位置(右から1文字分の空白)*/
  }
  </style>
  <div class="box"><span class="seal">こんな感じ！！</span></div>
  

　※スタイルシートをそのままコピー時に「/*○○*/」も一緒にコピーされてもCSSには影響ありませんのでそのまま貼り付けて確認できますので、アナタのブログの編集画面に貼り付けて確認してみて下さい。