How to Create Alligator (Or Sawtooth) Border Using CSS or Svg

How To Add Zig Zag Border to a Box contains background image

You can do that, but you need masking, and as far as I know it is only available in webkit.

#zigzag {    width: 600px;    height: 400px;    -webkit-mask-image: linear-gradient(0deg, transparent 30px, white 30px), linear-gradient(-135deg, white 15px, transparent 15px), linear-gradient(135deg, white 15px, transparent 15px);    -webkit-mask-position: left bottom;    -webkit-mask-repeat: repeat-x;    -webkit-mask-size: 100% 100%, 30px 30px, 30px 30px;    background: url("http://placekitten.com/1000/750");    background-size: cover;}
body {    background-image:  repeating-linear-gradient(20deg, lightgreen, lavender 40px);   }

<div id="zigzag"></div>

How do I create a collapsible element with just CSS using input and labels?

This should do it.
Changing this selector

input[checked]#menu_collapse

to

input[type="checkbox"]:checked#menu_collapse

li {  list-style-type: none;}
li::before {  content: "\00a0+";}
section.site_navigation {  background-color: #eed;  display: none;}
input#menu_collapse {  display: none;}
label[for="menu_collapse"] {  display: block;  margin: 5px;  padding: 3px;  background-color: #027;  color: #ffe;  font-weight: bold;}
input[type="checkbox"]:checked#menu_collapse  + label[for="menu_collapse"]  + section.site_navigation {  display: block;}

<input type="checkbox" id="menu_collapse"><label for="menu_collapse">Menu</label><section class="site_navigation">  <p>A lot of stuff</p>  <ul>    <li>Page 1</li>    <li>Page 2</li>  </ul></section><!-- the section is supposed to appear when the damned label is clicked on -->

Create button with multiple border

Something close to what you want would be:

.extra-bordered {  background: transparent;  border: 1px solid black;  box-shadow: 0px 0px 0 1px white, 0px 0px 0 3px black, 4px 4px 0 2px white, 4px 4px 0 3px black;}

<button class="extra-bordered">More About US</button>

---

Related Topics