This tutorial will teach you how you can make Diagonal Stripes within any DIV by CSS.
HTML Code :
<html>
<head>
<title>Diagonal Stripes in DIV CSS | native-code.blogspot.com</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="diagonal-stripes">
<h1>Diagonal Stripes CSS</h1>
</div>
</body>
</html>
CSS Code :
.diagonal-stripes {
width: 700px;
height: 300px;
border: 1px solid black;
background: repeating-linear-gradient(
45deg,
#B0BEC5,
#B0BEC5 10px,
#78909C 10px,
#78909C 20px
);
}
Output :
IDE Used To Test This Code : Sublime Text.
Try this code in your computer for better understanding. Enjoy the code. If you have any Question you can contact us or mail us.We will reply you as soon as possible.
HTML Code :
<html>
<head>
<title>Diagonal Stripes in DIV CSS | native-code.blogspot.com</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="diagonal-stripes">
<h1>Diagonal Stripes CSS</h1>
</div>
</body>
</html>
CSS Code :
.diagonal-stripes {
width: 700px;
height: 300px;
border: 1px solid black;
background: repeating-linear-gradient(
45deg,
#B0BEC5,
#B0BEC5 10px,
#78909C 10px,
#78909C 20px
);
}
Output :
IDE Used To Test This Code : Sublime Text.
Try this code in your computer for better understanding. Enjoy the code. If you have any Question you can contact us or mail us.We will reply you as soon as possible.
1 comments:
Thanks.
ReplyPost a Comment