Css - Create header gradient and pattern - html

Question

Is there any way to made the same style like in the image with CSS?

Answer 1

HTML5 allows us to draw multiple background images on any element. We can use CSS3's linear-gradient() and repeating-linear-gradient() functions to create 2 background images and draw them on the respective element.
Following code will create the background you need:
#header {
background-image: repeating-linear-gradient(-45deg, rgba(255,255,255,0.15),
rgba(255,255,255,0.15) 15px,
transparent 15px,
transparent 25px),
linear-gradient(to bottom, brown, red);
}
Note: Order of images in background-image property is important. Swapping
them won't create the effect you need.
Output Image:
Working Demo:
#header {
background-image: repeating-linear-gradient(-45deg, rgba(255,255,255,0.15), rgba(255,255,255,0.15) 15px, transparent 15px, transparent 25px), linear-gradient(to bottom, brown, red);
height: 80px;
border-radius: 5px 5px 0 0;
}
<header id="header"></header>

Answer 2

Try the below CSS
<div class="meter red">
<span style="width: 25%"></span>
</div>
.meter {
height: 20px; /* Can be anything */
position: relative;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
}
.meter > span {
display: block;
height: 100%;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background-color: rgb(43,194,83);
background-image: linear-gradient(
center bottom,
rgb(43,194,83) 37%,
rgb(84,240,84) 69%
);
box-shadow:
inset 0 2px 9px rgba(255,255,255,0.3),
inset 0 -2px 6px rgba(0,0,0,0.4);
position: relative;
overflow: hidden;
}
.red > span {
background-color: #f0a3a3;
background-image: linear-gradient(to bottom, #f0a3a3, #f42323);
}
.meter > span:after {
content: "";
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background-image: linear-gradient(
-45deg,
rgba(255, 255, 255, .2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, .2) 50%,
rgba(255, 255, 255, .2) 75%,
transparent 75%,
transparent
);
z-index: 1;
background-size: 50px 50px;
animation: move 2s linear infinite;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
overflow: hidden;
}