zigzag

How to Create Zigzag Border in HTML CSS?

Spread the love

To create Zigzag Border in HTML CSS, we have to use After and Before, It is very easy to make a zigzag border whose example is given below. The zigzag border helps us to make the website more attractive.

Example:-

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
  <!----myprograming.com----->
	<title>Zigzag Border in HTML CSS</title>
</head>
<style type="text/css">
 *{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
 }
 body{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #fff;
 }
 .zigzag{
  position: relative;
  width: 500px;
  height: 300px;
  background: red;
 }
  .zigzag::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 30px;
    background: linear-gradient(135deg,#fff 12px,
      transparent 0%), linear-gradient(-135deg,#fff 12px,
      transparent 0%);
    background-size: 30px;
  }
    .zigzag::after{
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30px;
    background: linear-gradient(45deg,#fff 12px,
      transparent 0%), linear-gradient(-45deg,#fff 12px,
      transparent 0%);
    background-size: 30px;
  }
  .zigzag
h1{
  text-align: center;
  margin-top: 100px;
  color: #fff;
}
</style>
<body> 
 
<div class="zigzag">
<h1>This is Zigzag Border Example</h1> 
</div>

</body>
</html>

Output:-


Spread the love

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *