Cinta CSS

Abrir en el editor Video Publica tu código

Recomendado

14 January 2026

Ejemplo de diseño adaptable de barra lateral HTML CSS

8 September 2024

.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;
}

Cinta CSS

Recomendado

Ejemplo de diseño adaptable de barra lateral HTML CSS

Marquesina infinita solo CSS

Efecto de texto con fallo CSS

HTML

CSS

JS

Recomendado

Ejemplo de diseño adaptable de barra lateral HTML CSS

Marquesina infinita solo CSS

Efecto de texto con fallo CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS