cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

Quick-add: + add another resource

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <body>
<div class="container">
<section class="col-2 ss-style-triangles">
    <div class="column text">
         <h2>Flat Section Separator Inspiration</h2>
      <p>Change $color1 to change entire color scheme</p>
    </div>
</section>

<section class="color">
    <p>triangle</p>
</section>

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

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

<section class="color ss-style-bigtriangle">
    <p>bigtriangle</p>
</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"></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 text">
         <h2>Curvedown</h2>
    </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">
    <p>Curve Up</p>
</section>

<section class="col-2 color ss-style-multitriangles">
    <div class="column text">
         <h2>Spikey</h2>
    </div>
</section>

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

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

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

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

<section>
    <p>boxes</p>
</section>

<section class="col-3 color ss-style-zigzag">
    <div class="column">
        <p>zigzag</p>
    </div>
</section>

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

<section class="color ss-style-roundedges">
    <p>round corners</p>
</section>

<section class="col-3 ss-style-slit">
    <div class="column">
        <p>Slit</p>
    </div>
</section>

<svg id="bigHalfCircle" 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 C40 0 60 0 100 100 Z" />
</svg>

<section class="col-2 color">
    <div class="column text">
        <p>big half circle</p>
    </div>
</section>

<svg id="bigTriangleShadow" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none">
    <path id="trianglePath1" d="M0 0 L50 100 L100 0 Z" />
    <path id="trianglePath2" d="M50 100 L100 40 L100 0 Z" />
</svg>

<section>
    <p>big triangle shadow</p>
</section>

<section class="color col-3 ss-style-inczigzag">
    <div class="column">
        <p>saw</p>
    </div>
</section>

<section>
    <div class="column">
        <p>clouds</p>
    </div>
</section>

<svg id="clouds" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none">
    <path d="M-5 100 Q 0 20 5 100 Z
         M0 100 Q 5 0 10 100
         M5 100 Q 10 30 15 100
         M10 100 Q 15 10 20 100
         M15 100 Q 20 30 25 100
         M20 100 Q 25 -10 30 100
         M25 100 Q 30 10 35 100
         M30 100 Q 35 30 40 100
         M35 100 Q 40 10 45 100
         M40 100 Q 45 50 50 100
         M45 100 Q 50 20 55 100
         M50 100 Q 55 40 60 100
         M55 100 Q 60 60 65 100
         M60 100 Q 65 50 70 100
         M65 100 Q 70 20 75 100
         M70 100 Q 75 45 80 100
         M75 100 Q 80 30 85 100
         M80 100 Q 85 20 90 100
         M85 100 Q 90 50 95 100
         M90 100 Q 95 25 100 100
         M95 100 Q 100 15 105 100 Z"></path>
</svg>

<section class="clouds">
    <p>Thanks to <a href="https://tympanus.net/codrops/author/crnacura/">Mary Lou</a> and Codrops for this code. Visit the tutorial here: <a href="https://tympanus.net/codrops/2013/10/03/a-collection-of-separator-styles/">https://tympanus.net/codrops/2013/10/03/a-collection-of-separator-styles/</a>
    </p>
  
  
  
</section>

</div>
</body>
            
          
!
            
              @import "compass/css3";

@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700);

//Change color1 to change entire color scheme
$color1:teal;
$cloudColor:#ecf0f1;

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

/* General styles and layout */

body {
	background: $color1;
	color: #fff;
	font-family: 'Lato', Arial, sans-serif;
  padding:0px;
  margin:0px;
}

.container {
	overflow: hidden;
  width:100%;
  margin:0px;
	/* we don't want the pseudo-elements sticking out */
}

.container svg {
	display: block;
}

section {
	position: relative;
	padding: 10em ;
	background: $color1;
	color: #fff;
	text-align: center;
}

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

section p {
	color: lighten($color1, 65%);
	font-size: 1.3em;
	line-height: 1.5;
}

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

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

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

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

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

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


.color {
	background: darken($color1, 7%);
}

/*** 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: $color1;
}

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

/* Double Diagonal line */

.ss-style-doublediagonal {
	z-index: 1;
	padding-top: 6em;
	background: darken($color1, 11%);
}

.ss-style-doublediagonal::before,
.ss-style-doublediagonal::after {
	top: 0;
	left: -25%;
	z-index: -1;
	width: 150%;
	height: 75%;
	background: inherit;
	-webkit-transform: rotate(-2deg);
	transform: rotate(-2deg);
	-webkit-transform-origin: 0 0;
	transform-origin: 0 0;
}

.ss-style-doublediagonal::before {
	height: 50%;
	background: darken($color1, 15%);
	-webkit-transform: rotate(-3deg);
	transform: rotate(-3deg);
	-webkit-transform-origin: 3% 0;
	transform-origin: 3% 0;
}

/* Half Circle */
.ss-style-halfcircle::before,
.ss-style-halfcircle::after {
	left: 50%;
	z-index: 10;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	background: inherit;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}

.ss-style-halfcircle::before {
	top: -50px;
}

.ss-style-halfcircle::after {
	bottom: -50px;
}

/* Big Triangle */
svg#bigTriangleColor {
	pointer-events: none;
}

#bigTriangleColor path {
	fill: darken($color1, 7%);
	stroke: darken($color1, 7%);
	stroke-width: 2;
}

/* Curves */
#curveUpColor path,
#curveDownColor path {
	fill: darken($color1, 7%);
	stroke: darken($color1, 7%);
}

/* Multiple Triangles */
.ss-style-multitriangles::before,
.ss-style-multitriangles::after {
	left: 50%;
	width: 50px;
	height: 50px;
	-webkit-transform: translateX(-50%) rotate(45deg);
	transform: translateX(-50%) rotate(45deg);
}

.ss-style-multitriangles::before {
	top: -25px;
	background: inherit;
	box-shadow: -50px 50px 0 darken($color1, 7%), 50px -50px 0 darken($color1, 7%);
}

.ss-style-multitriangles::after {
	bottom: -25px;
	z-index: 10;
	background: inherit;
	box-shadow: -50px 50px 0 darken($color1, 7%), 50px -50px 0 darken($color1, 7%);
}

/* Rounded corners */
.ss-style-roundedcorners::before {
	top: 100%;
	left: 0;
	z-index: 10;
	width: 100%;
	height: 60px;
	border-radius: 0 0 60px 60px;
	background: inherit;
}

/* Rounded center split and bottom rounded */
.ss-style-roundedsplit {
	padding-top: 7em;
	border-radius: 0 0 80px 80px;
}

.ss-style-roundedsplit::before,
.ss-style-roundedsplit::after {
	top: -70px;
	left: 0;
	z-index: 10;
	width: 50%;
	height: 70px;
	background: inherit;
}

.ss-style-roundedsplit::before {
	border-radius: 0 80px 0 0;
}

.ss-style-roundedsplit::after {
	left: 50%;
	border-radius: 80px 0 0 0;
}

/* Inverted rounded corners */
.ss-style-invertedrounded {
	margin-bottom: 90px;
	padding: 13em 10% 10em;
	border-radius: 0 0 0 90px;
}

.ss-style-invertedrounded::before,
.ss-style-invertedrounded::after {
	left: 0;
	z-index: -1;
	height: 90px;
	background: darken($color1, 7%);
}

.ss-style-invertedrounded::before {
	top: 100%;
	width: 100%;
	border-radius: 0 90px 0 0;
} 

.ss-style-invertedrounded::after {
	bottom: 0;
	z-index: -1;
	width: 50%;
}


/* Zig Zag (3d up and simple down) */
.ss-style-zigzag::before,
.ss-style-zigzag::after {
    right: 0;
    left: 0;
    z-index: 10;
    display: block;
    height: 90px;
    background-size: 50px 100%;
  }

.ss-style-zigzag::before {
	top: -90px;
	background-image: -webkit-gradient(linear, 0 0, 300% 100%, color-stop(0.25, transparent), color-stop(0.25, darken($color1, 7%)));
	background-image:
		linear-gradient(315deg, darken($color1, 2%) 25%, transparent 25%),
		linear-gradient( 45deg, darken($color1, 7%) 25%, transparent 25%);
	background-position: 50%;
}

.ss-style-zigzag::after {
	top: 100%;
	background-image: -webkit-gradient(linear, 0 0, 300% 100%, color-stop(0.25, darken($color1, 7%)), color-stop(0.25, $color1));
	background-image: 
		linear-gradient(135deg, darken($color1, 7%) 25%, transparent 25%),
		linear-gradient(225deg, darken($color1, 7%) 25%, transparent 25%);
	background-position: 50%;
}

/* Edges */
.ss-style-roundedges {
	padding-bottom: 16em;
}

.ss-style-roundedges::before,
.ss-style-roundedges::after {
	width: 200px;
	height: 200px;
	border-radius: 50%;
	background: $color1;
	top: -100px;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

.ss-style-roundedges::before {
	left: -100px;
}

.ss-style-roundedges::after {
	right: -100px;
}

/* Slit */
.ss-style-slit {
	padding-top: 5em;
}

.ss-style-slit::before, 
.ss-style-slit::after {
	width: 50.5%;
	width: -webkit-calc(50% + 10px);
	width: -moz-calc(50% + 10px);
	width: calc(50% + 10px);
	height: 160px;
	background: $color1;
	top: -160px;
}

.ss-style-slit::before {
	left: -20px;
	-webkit-transform: skewX(10deg);
	transform: skewX(10deg);
	box-shadow: -10px -20px darken($color1, 8%);
}

.ss-style-slit::after {
	right: -20px;
	-webkit-transform: skewX(-10deg);
	transform: skewX(-10deg);
	box-shadow: 10px -20px darken($color1, 8%);
}

/* Big half circle */
#bigHalfCircle path {
	fill: darken($color1, 7%);
	stroke: darken($color1, 7%);
}

/* Big triangle with shadow */

#trianglePath1 {
	fill: darken($color1, 7%);
	stroke: darken($color1, 7%);
} 

#trianglePath2 {
	fill: darken($color1, 13%);
	stroke: darken($color1, 13%);
}

/* Inclined Zig Zag */
.ss-style-inczigzag::before,
.ss-style-inczigzag::after {
	left: 0;
	width: 100%;
	height: 50px;
	background-size: 100px 100%;
}

.ss-style-inczigzag::before {
	top: 0;
	background-image: -webkit-gradient(linear, 0 0, 10% 100%, color-stop(0.5, darken($color1, 11%)), color-stop(0.5, darken($color1, 7%)));
	background-image: linear-gradient(15deg, darken($color1, 7%) 50%, $color1 50%);
}

.ss-style-inczigzag::after {
	bottom: 0;
	background-image: -webkit-gradient(linear, 0 0, 10% 100%, color-stop(0.5, darken($color1, 7%)), color-stop(0.5, $color1));
	background-image: linear-gradient(15deg, $color1 50%, darken($color1, 7%) 50%);
}



/* Clouds */
#clouds path {
	fill: $cloudColor;
	stroke: $cloudColor;
}
.clouds {
  background: $cloudColor;
  p {
    color:#333;
  }
  a {
    color:darken($color1, 10%);
    text-decoration:none;
    &:hover{
      color:darken($color1, 40%);
    }
  }
}

/* Media Queries for the layout */
@media screen and (max-width: 68em) {
	section {
		font-size: 80%;
	}
}

@media screen and (max-width: 54em) {
	.column {
		display: block;
		width: 100% !important;
	}

	.text:first-child,
	.text:nth-child(2) {
		text-align: center;
	}

	.icon {
		margin: 0 auto;
	}

	.col-2 .column:first-child .icon {
		margin: 0 auto 50px;
	}

	.col-2 .column:nth-child(2) .icon {
		margin: 50px auto 0;
	}
}
            
          
!
999px
Loading ..................

Console