Breaking News

by Charles Butler

HTML

<div class="element">
  <div id="news-bar-2dc693d2bfb89127aac4be42a7bb49d7" class="news-bar-style-1">
    <p><strong>DOWNLOAD</strong><span>The News Backgrounds After Effects Project You Requested Can Be Found Below...</span></p>
  </div>
</div>

CSS

.news-bar-style-1 {
  width: 100%;
  display: block;
}

.news-bar-style-1 p {
  width: 100%;
  display: block;
  background-color: #f2f2f2;
  background-color: rgba(0, 0, 0, .05);
  padding: 1em 0;
  white-space: nowrap;
  font-size: 1em;
  line-height: 1em;
  border-radius: 3px;
  overflow: hidden;
}

.news-bar-style-1 strong {
  position: relative;
  display: inline;
  padding: 1em 1em 1em 1.5em;
  margin-right: 2em;
  background-color: #004a80;
  font-weight: bolder;
  color: #fff;
  line-height: 1em;
  border-radius: 3px 0 0 3px;
}

.news-bar-style-1 strong::after {
  position: absolute;
  top: 50%;
  right: -1em;
  margin-top: -2em;
  content: "";
  width: 0;
  height: 0;
  border-top: 2em solid transparent;
  border-left: 1em solid #004a80;
  border-bottom: 2em solid transparent;
}

.news-bar-style-1 strong::after {
  position: absolute;
  top: 50%;
  right: -1em;
  margin-top: -2em;
  content: "";
  width: 0;
  height: 0;
  border-top: 2em solid transparent;
  border-left: 1em solid #004a80;
  border-bottom: 2em solid transparent;
}