Seperators Example

Change class name on click in jQuery

by Roshan Karunarathna

HTML

<div class="container">
  <!-- Top Navigation -->
  <div class="codrops-top clearfix">

    <span class="right"></span>
  </div>

  <section class="col-2 ss-style-triangles">
    <div class="column text">

    </div>
    <div class="column">

    </div>
  </section>
  <section class="color">

  </section>
  <section class="col-3 ss-style-doublediagonal">
    <div class="column">


    </div>
  </section>
  <section class="col-2 ss-style-halfcircle">
    <div class="column">

    </div>
    <div class="column text">

    </div>
  </section>
  <section class="color ss-style-bigtriangle">

  </section>
  <svg id="bigTriangleColor" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 102" preserveAspectRatio="none">
				<path d="M0 0 L50 100 L100 0 Z" />
			</svg>
  <section class="col-3">
    <div class="column">


    </div>
    <div class="column">

    </div>
  </section>
  <svg id="curveUpColor" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none">
				<path d="M0 100 C 20 0 50 0 100 100 Z"/>
			</svg>
  <section class="col-2 color ss-style-curvedown">
    <div class="column">

    </div>
    <div class="column text">

    </div>
  </section>
  <svg id="curveDownColor" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none">
				<path d="M0 0 C 50 100 80 100 100 0 Z"/>
			</svg>
  <section class="col-2">
   
  </section>
  <section class="col-2 color ss-style-multitriangles">
    <div class="column text">

    </div>
    <div class="column">

    </div>
  </section>
  <section class="col-2">

  </section>
  <section class="col-2 color ss-style-roundedsplit">
    <div class="column">

    </div>
    <div class="column text">

    </div>
  </section>
  <section class="col-3 ss-style-invertedrounded">
    <div class="column">


    </div>
    <div class="column">

      <p></p>
    </div>
 ...

CSS

/* Componenent CSS */

*,
*::after,
*::before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}


/* General styles and layout */

body {
  background: #2980b9;
  color: #fff;
  font-family: 'Lato', Arial, sans-serif;
}

.container {
  overflow: hidden;

  /* we don't want the pseudo-elements sticking out */
}

.container svg {
  display: block;
}

section {
  position: relative;
  padding: 10em 10%;
  background: #2980b9;
  color: #fff;
  text-align: center;
}

section h2 {
  margin: 0;
  padding: 0;
  font-size: 2.8em;
  font-weight: 400;
}

section p {
  color: rgba(0, 0, 0, 0.3);
  font-size: 1.3em;
  line-height: 1.5;
}

.text:first-child {
  text-align: right;
}

.text:nth-child(2) {
  text-align: left;
}

.column {
  display: inline-block;
  vertical-align: top;
}

.col-2 .column {
  width: 49%;
}

.col-3 .column {
  padding: 0 1%;
  width: 33%;
  text-align: center;
}

.col-3 .column p {
  padding: 1.4em;
}



.icon {
  display: block;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.1);
  color: #fff;
  text-align: center;
  font-size: 8em;
  line-height: 2em;
  margin: 0 auto;
}

section.color h2 {
  color: #fff;
}

.color {
  background: #3498db;
}


/*** Individual section styles and separators ***/


/* Common style for pseudo-elements */

section::before,
section::after {
  position: absolute;
  content: '';
  pointer-events: none;
}


/* Triangles */

.ss-style-triangles::before,
.ss-style-triangles::after {
  left: 50%;
  width: 100px;
  height: 100px;
  -webkit-transform: translateX(-50%) rotate(45deg);
  transform: translateX(-50%) rotate(45deg);
}

.ss-style-triangles::before {
  top: -50px;
  background: #2980b9;
}

.ss-style-triangles::after {
  bottom: -50px;
  z-index: 10;
  background: inherit;
}


/* Double Diagonal line */

.ss-style-doublediagonal {
  z-index: 1;
  padding-top: 6em;
  background:...