GhitaB GhitaB -4 years ago 313
CSS Question

CSS custom shape - border size

I have a custom fancy footer created with html and css. See it here: https://jsfiddle.net/fb6qdvrw/

To create the triangles I use

:before
and
:after
like this:

#footer .layer-4.bg-secondary:before {
content: '';
position: absolute;
top: 0;
right: 0;
left: 100%;
border-top: 120px solid transparent;
border-left: 120px solid #FFFFFF;
width: 0;
}

#footer .layer-4.bg-secondary:after {
content: '';
position: absolute;
top: 10px;
right: 0;
left: 100%;
border-top: 120px solid transparent;
border-left: 120px solid #ffcf87;
width: 0;
}


The problem I want to solve is the white line / border thickness. I need it to have the same thickness for diagonal and horizontal line. Is this possible in my case? I see I am limited to triangles and rectangles, but I think there must be a solution. For the moment my fancy footer is ugly because of this.

This is the fancy footer

Answer Source

You can create this shape by using CSS3 skew() transformations.

Required HTML:

All we need is 2 elements inside footer i.e:

<div class="footer">
  <div class="top"></div>
  <div class="bottom"></div>
</div>

We will then use ::before and ::after pseudo elements for each of both child elements to draw skewed overlays on the respective elements:

Output:

Output Image

Working Example:

body {margin: 0;}

.footer {
  position: relative;
  padding-top: 100px;
  overflow: hidden;
}

.top,
.bottom {
  position: relative;
  height: 50px;
}

.bottom {
  margin-top: 10px;
}

.top::before {
  transform-origin: left top;
  transform: skew(45deg);
  position: absolute;
  background: green;
  height: 100px;
  width: 145px;
  content: '';
  top: 100%;
  right: 0;
}

.bottom:before {
  transform-origin: right bottom;
  transform: skew(45deg);
  position: absolute;
  background: blue;
  height: 150px;
  bottom: 100%;
  width: 95px;
  content: '';
  left: 0;
}

.top::after,
.bottom::after {
  transform-origin: left bottom;
  transform: skew(45deg);
  position: absolute;
  background: green;
  right: -100px;
  left: 100px;
  content: '';
  bottom: 0;
  top: 0;
}

.bottom:after {
  transform-origin: right bottom;
  background: blue;
  right: 100px;
  left: -100px;
}
<div class="footer">
  <div class="top">
  
  </div>
  <div class="bottom">
    
  </div>
</div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download