How to make a scalloped line on the website?

Is the layout 5e18b9602e5f2294627863.png
Question: How to make a scalloped line in the css as the layout?
April 4th 20 at 01:28
3 answers
April 4th 20 at 01:30
Solution
Using the gradient.

First option:
https://codepen.io/milanwake/pen/bGNMwwe

The first option

<div class="zigzag"></div>

body {
 background: #F7F2E2;
}

.zigzag {
 margin: 7.5% 0;
 background: #F7F2E2;
 position: relative;
 height: 20px;
 z-index: 1;
}
.zigzag:before, .zigzag:after {
 content: "";
 display: block;
 position: absolute;
 left: 0;
 right: 0;
}
.zigzag:before {
 height: 12px;
 top: 110%;
 background: linear-gradient(-135deg, #2196F3 8px, transparent 0) 0 8px, linear-gradient(135deg, #2196f3 8px, transparent 0) 0 8px;
 background-position: top left;
 background-repeat: repeat-x;
 background-size: 16px 16px;
}
.zigzag:after {
 height: 16px;
 top: 100%;
 background: linear-gradient(-135deg, #F7F2E2 8px, transparent 0) 0 8px, linear-gradient(135deg, #F7F2E2 8px, transparent 0) 0 8px;
 background-position: top left;
 background-repeat: repeat-x;
 background-size: 16px 16px;
}


The second option:
https://codepen.io/milanwake/pen/rNavWvB

The second option
<div class="zigzag"></div>

.zigzag {
position: relative;
height: 16px;
border: 0;
width: 50%;
margin: 30px auto;
}
.zigzag:before,
.zigzag:after {
content: "";
display: block;
position: absolute;
left: 0;
right: 0;
background-size: 18px 100%;
height: inherit;
}
.zigzag:before {
background-image: linear-gradient(315deg, #3f51b5 30%, transparent 30%), linear-gradient(45deg, #3f51b5 30%, transparent 30%);
background-position: 50%;
top: -8px;
}
.zigzag:after {
background-image: linear-gradient(135deg, #3f51b5 30%, transparent 30%), linear-gradient(225deg, #3f51b5 30%, transparent 30%);
background-position: calc(50% - 8px);
top: 8px;
}
Thanks, it turned out) - gerry.Abshire commented on April 4th 20 at 01:33
@gerry.Abshire, Glad I could help))

I updated the answer and added the second option, the code of the second example seems more cleaner and safer. - oscar_Deckow74 commented on April 4th 20 at 01:36
Okay thank you, Yes indeed it looks better code - gerry.Abshire commented on April 4th 20 at 01:39
@gerry.Abshire, OK)) - oscar_Deckow74 commented on April 4th 20 at 01:42
April 4th 20 at 01:32
Solution
Well, actually you can make a large number of div, set the stroke to set display inline to turn them all 45 degrees, to invest in the other block to set it to overflow hidden, and set the height so that half of the DIVS were hidden. It's about perversion. But humanly, you need to cut some element of this strip, save to png. To put as a background element block. And to prohibit the repetition of vertical(repeatY: no-repeat), respectively, the repetition of the horizontal remain, and this piece of the line will be repeated until then, until the width of the hips.
Thanks for the reply but I did as answered in the post above but this option will also take into account). - gerry.Abshire commented on April 4th 20 at 01:35
April 4th 20 at 01:34
Through background-image saillant svg pattern, which is then propagated through the background-repeat

Find more questions by tags CSSLayout