CSS Ribbon

1,773 ledoc

Open In Editor Publish Your Code

CSS Ribbon

Recommended

12 July 2025

CSS Card Glow Effect

14 April 2023

Responsive CSS Navbar

10 February 2025

HTML

CSS

.css-ribbon {
  position: relative;
  z-index: 1;
  padding: 1em 2em;
}
.bsribbon {
  font-size: 120% !important;
  width: 60%;
  position: relative;
  background: #0cc5f4;
  color: #fff;
  text-align: center;
  padding: 1em 2em;
  margin: 2em auto 3em;
}

.bsribbon:before,
.bsribbon:after {
  content: "";
  position: absolute;
  display: block;
  bottom: -1em;
  border: 1.5em solid #04a8d1;
  z-index: -1;
}

.bsribbon:before {
  left: -2em;
  border-right-width: 1.5em;
  border-left-color: transparent;
}

.bsribbon:after {
  right: -2em;
  border-left-width: 1.5em;
  border-right-color: transparent;
}

.bsribbon .ribbon-content:before,
.bsribbon .ribbon-content:after {
  content: "";
  position: absolute;
  display: block;
  border-style: solid;
  border-color: #088eb0 transparent transparent transparent;
  bottom: -1em;
}

.bsribbon .ribbon-content:before {
  left: 0;
  border-width: 1em 0 0 1em;
}

.bsribbon .ribbon-content:after {
  right: 0;
  border-width: 1em 1em 0 0;
}

@keyframes colorChange {
  0% {
    background-color: #36d0ff;
  }
  50% {
    background-color: #2c86d4;
  }
  100% {
    background-color: #36D0FF7;
  }
}

.bsribbon {
  animation: colorChange 3s infinite;
}

.bsribbon:hover {
  box-shadow: 0 0 10px #ffffff;
}

button:hover {
  background-color: #9ad9e3;
}

.bsribbon:active {
  background-color: #eddcad;
}

JS