Background triangles

[Mario Santos]

Description

In most of the pages of the web, there are some triangles in the background for styling them.

While some of the properties like colors or sizes while be the same for all the triangles, there are some that can be different depending on the page:

• position: They can be placed in left, right, both-sides or none.
• top: The position from the top may vary depending the page.
• top-triangle-opacity: The opacity of the triangle on the top level may vary as well.

In order to get these properties for each page, we are planning to pass them using Advanced Custom Fields and the REST API, so in each page we can find a field named acf:

Note that this is our first idea, feel free to modify it if you consider it's better other way.

Possible solution

In the Frontity project, inside the <Page /> component, we could include a new component to handle these background triangles. Apart from that, we should fetch the acf field to get the customizable properties for each page (homepage, about-us, contact-us...).

The component could be something similar to this (adapting it to the Invision real styles and valid React):

Note that this code is not valid (nor the javascript or the css), is just to have an idea of the possible implementation.

const { position, top, top-triangle-opacity } = acf.background-triangles;

const BackgroundTriangles = ( ) => {
  <TrianglesContainer>
        <Triangle1 />
        <Triangle2 />
  </TrianglesContainer>
};
export default connect(BackgroundTriangles);

const TrianglesContainer = styled.div`
  position: absolute;
  top: {$top};
  display: block;
  width: 0px;
  align-items: center;
  transform: rotate(45deg);
`;
const BackgroundTriangle = styled.div`
  position: absolute;
  width: 817px;
  height: 817px;
`;
const Triangle1 = styled(BackgroundTriangle)`
  box-shadow: 0 0 14px 0 rgba(12, 17, 43, 0.03);
  z-index: 1000;
  left: 114px;
  top: -114px;
  background: white;
  opacity: 0.8;
`;
const Triangle2 = styled(BackgroundTriangle)`
  z-index: 2000;
  background: gray;
  opacity: {$opacity}
`;

There is a similar implementation in the footer of the current web at https://frontity.org, it could be useful as well.

Where to check

In order to get the correct styles, we can take a look at Invision, at the homepage and the about-us page.
In order to check if it's working in the Frontity side, we've added different Advanced Custom Fields to the /homepage and the /common-styles/ page.