Docs

[Edward Williams]

Hey folks!

Having a really hard time getting the down arrow to work as a row separator.

I’ve been on here for about an hour now trying out the different CSS styles and I haven’t been able to get anything going yet. Even installed an SVG plug-in thinking that would help resolve the issue and haven’t gotten anything to work yet. What I’m after is the first example here: https://codepen.io/lukeyphills/pen/FjygE

It just won’t take.

I’ve removed the SVG plug-in (I don’t think it was working), but I’m hoping you all can help with this.

Details below.

[Edward Williams]

This reply has been marked as private.

[Christian]

Hey Edward,

I tested the code and it works.

http://i.imgur.com/qSjUpP7.gifv

Please add the code below in your page’s Cornerstone CSS

.x-section {
  position: relative;
  padding: 10em;
  background: teal;
  color: #fff;
  text-align: center;
}

.x-section::before,
.x-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: teal;
}

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

Then, add the class ss-style-triangles to the Section you want to appy the divider.

The double diagonal separator should work the same. Please take note that this is custom CSS. Though I showed a way how to integrate it, fixing conflicts or issues arising from the use of third party code is outside the scope of our support. In that case, you would need a web developer to integrate or fix a feature for you.

I’ll forward this as feature request and our development team might integrate a similar feature in the
future.

Hope that helps.:)

[Edward Williams]

This worked.

Thank you so much!

[Prasant Rai]

You are most welcome. 🙂

[Author]

Posts