Display two legal notices with distinct styles

by Tan

HTML

<div class="notice">
<span class="note">Legal Notice</span>
<p>blah!</p><p>blah!</p>

</div>

<div class="notice2">
<span class="note2">Legal Notice Number Two</span>
<p>blah!</p><p>blah!</p>

</div>

CSS

.notice {font-family:Arial;border:2px solid teal;position:relative;padding:20px 20px 0 20px;margin-bottom:20px;}
.note {position:absolute;left:0;top:0;display:block;color:#ffffff;background-color:teal;
padding:3px 25px 5px 5px;clip-path: polygon(0 0, 100% 0%, calc(100% - 20px) 100%, 0% 100%);}

.notice2 {font-family:Arial;border:2px solid teal;position:relative;padding:0 10px;margin-top:40px;animation-name: myAnimation2;
  animation-duration: 4s;
  animation-iteration-count: infinite;}
.note2 {position:absolute;left:-2px;bottom:100%;display:block;color:#ffffff;background-color:teal;
padding:5px 25px 5px 10px;clip-path: polygon(0 0, calc(100% - 20px) 0%, 100% 100%, 0% 100%);
animation-name: myAnimation;
  animation-duration: 4s;
  animation-iteration-count: infinite;}

@keyframes myAnimation {
  0%   {background-color: teal;}
  50%  {background-color: #00A8A8;}
  100% {background-color: teal;}
}
@keyframes myAnimation2 {
  0%   {border-color: teal;}
  50%  {border-color: #00A8A8;}
  100% {border-color: teal;}
}