create Rectangle With Gradient Color Stripes Border via CSS - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Color

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Color

Description

create Rectangle With Gradient Color Stripes Border via CSS

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>  SitePoint</title> 
  <style>

html {<!--from  ww w.jav  a  2s . c om-->
   position: relative;
   height: 100%;
   background: #333;
}
html:before, html:after {
   position: absolute;
   content: '';
   height: 1em;
   top: 0;
   left: 0;
   right: 0;
}
html:after {
   top: auto;
   bottom: 0;
}
html:before {
   background: linear-gradient(90deg, red 3%, pink 3%, pink 14%, black 14%, black 28%, yellow 28%, yellow 48%, white 48%, white 60%, #f1c40f 60%, #f1c40f 55%, #e67e22 55%, #e67e22 76%, #e74c3c 76%, #e74c3c 83%, #ecf0f1 83%, #ecf0f1 81%, #95a5a6 81%);
}
html:after {
   background: linear-gradient(90deg, red 10%, pink 10%, pink 12.5%, black 12.5%, black 28%, yellow 28%, yellow 35%, white 35%, white 60%, #f1c40f 60%, #f1c40f 69%, #e67e22 69%, #e67e22 83%, #e74c3c 83%, #e74c3c 88%, #ecf0f1 88%, #ecf0f1 96%, #95a5a6 96%);
}
body {
   padding-top: 20px;
}
p {
   text-align: center;
   color: white;
}
a {
   color: white;
}


      </style> 
 </head> 
 <body translate="no"> 
  <p> test test test test test  <a href="">link link link</a> . </p>  
 </body>
</html>

Related Tutorials