सीएसएस रिबन

1092 ledoc

संपादक में खोलें अपना कोड प्रकाशित करें

अनुशंसित

28 August 2025

टेलविंड सीएसएस के साथ वास्तुकला और डिज़ाइन वेबसाइट

23 August 2024

व्याख्याता एमपी3 और एचटीएमएल सीएसएस और जेएस

8 November 2023

404 पेज नॉट फाउंड विथ सीएसएस

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

अनुशंसित

टेलविंड सीएसएस के साथ वास्तुकला और डिज़ाइन वेबसाइट

व्याख्याता एमपी3 और एचटीएमएल सीएसएस और जेएस

404 पेज नॉट फाउंड विथ सीएसएस

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS