How to create zigzag shape using CSS? - html

Question

Sometimes I see this type of shape and corner on web design. sample image
I have highlighted in red, please help how to create it using css.

Answer 1

You can achieve this using CSS pseudo selectors and css-shapes.
Here is the codepen link.
body {
margin: 0;
padding: 0;
font-family: sans-serif;
background: #e6e2bc;
}
nav.navigation {
background: #23272a;
padding-top: 3rem;
}
nav.navigation ul {
background: #23272a;
margin: 0;
padding: 0;
list-style-type: none;
}
nav.navigation ul li {
position: relative;
top: -1rem;
float: left;
cursor: pointer;
width: 25%;
}
nav.navigation ul li:after,
nav.navigation ul li:before {
content: "";
display: table;
float: none;
clear: both;
}
nav.navigation ul li a {
display: block;
color: #a14f29;
text-align: center;
height: 1rem;
vertical-align: middle;
margin: 1rem 0;
text-decoration: none;
border-top: 1px solid #bb6c45;
background: rgb(163, 84, 45);
background: -moz-linear-gradient( top, rgb(163, 84, 45) 0%, rgb(141, 66, 35) 100%);
background: -webkit-linear-gradient( top, rgb(163, 84, 45) 0%, rgb(141, 66, 35) 100%);
background: linear-gradient( to bottom, rgb(163, 84, 45) 0%, rgb(141, 66, 35) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#a3542d", endColorstr="#8d4223", GradientType=0);
}
nav.navigation ul li:hover>a i {
box-shadow: 0 0 0 8px rgba(0, 0, 0, 0.15);
}
nav.navigation ul li a i {
position: absolute;
z-index: 1;
color: rgba(35, 39, 42, 0.9);
background: rgb(163, 84, 45);
background: -moz-linear-gradient( top, rgb(163, 84, 45) 0%, rgb(141, 66, 35) 100%);
background: -webkit-linear-gradient( top, rgb(163, 84, 45) 0%, rgb(141, 66, 35) 100%);
background: linear-gradient( to bottom, rgb(163, 84, 45) 0%, rgb(141, 66, 35) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#a3542d", endColorstr="#8d4223", GradientType=0);
font-size: 1.25em;
padding: 1.25rem;
border-radius: 50%;
box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.15);
transform: translate(-50%, -35%);
transition: 0.25s all ease;
}
nav.navigation ul li a i:after {
content: "";
position: absolute;
top: 6px;
right: 6px;
bottom: 6px;
left: 6px;
border: 2px solid rgba(35, 39, 42, 0.25);
z-index: 1;
border-radius: 50%;
}
nav.navigation ul li a p {
padding: 2.8rem 2rem 0.625rem;
background: #e6e2bc;
display: block;
z-index: 0;
font-weight: bold;
text-transform: uppercase;
font-style: italic;
}
nav.navigation ul li a p span {
background: #e6e2bc;
display: block;
z-index: 0;
font-weight: normal;
font-size: 0.8rem;
text-transform: lowercase;
margin-top: 0.25rem;
}
nav.navigation ul li a p:after {
content: "";
position: absolute;
width: 0;
height: 0;
top: 23px;
right: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 10px solid #e6e2bc;
z-index: 1;
}
nav.navigation ul li a p:before {
content: "";
position: absolute;
width: 0;
height: 0;
top: 33px;
right: 10px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 10px solid #8d4223;
z-index: 1;
}
nav.navigation ul li:last-child a p:before,
nav.navigation ul li:last-child a p:after {
display: none;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" rel="stylesheet" />
<nav class="navigation">
<ul>
<li>
<a href="#">
<i class="fas fa-cog"></i>
<p>Work <span>Work hard, dream big</span></p>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-calendar-alt"></i>
<p>Deliver <span>Deliver fast and responsively</span></p>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-cog"></i>
<p>Work <span>Work hard, dream big</span></p>
</a>
</li>
<li>
<a href="#">
<i class="fas fa-calendar-alt"></i>
<p>Deliver <span>Deliver fast and responsively</span></p>
</a>
</li>
</ul>
</nav>