Angled CSS background with bottom border.

Question

I'm trying to create a CSS background that looks like this:

I've been able to create the shape, but can't figure out how to add the bottom border, and am starting to think my approach may be the problem.

So far I have the following CSS:

.wrapper {
  display: flex;
}

.column {
    margin: 5px;
    display: flex;
    flex-direction: column;
}

and HTML:

<div class="wrapper">
  <div class="column">
    <img src="http://fakeimg.pl/300x200" />
    <p>text as well</p>
  </div>
  <div class="column">
    <img src="http://fakeimg.pl/300x200" />
    <p>text as well</p>
  </div>
  <div class="column">
    <img src="http://fakeimg.pl/300x200" />
    <p>text as well</p>
  </div>
</div>

and a code pen: https://codepen.io/arel/pen/PKXGmd

My problem right now is that the bottom border is a horizontal line, and I can't figure out how to have it follow the angle of the box.

Here is what I have so far:

Answer 1

Trying to use a linear gradient may not be the best solution here.

Appending an object with a little CSS transformation some judicious layering will accomplish what you want and will have fewer properties to adjust if you want to change the angle later.

jQuery(document).ready(function($) {
  $("#my-slider").sliderPro();
});

$("#my-slider").sliderPro({
  width: '100%',
  height: $(".header").height(),
  slideAnimationDuration: 5000,
  arrows: true,
  buttons: false,
  waitForLayers: true,
  fade: true,
  autoplay: true,
  autoScaleLayers: false
});

Here is a working example to play with

Answer 2

Add this CSS to fake a bottom border:

package main

import (
    "fmt"
    "regexp"
)

func main() {
    r := regexp.MustCompile(`(\%)(?:[^!$|\W])`)
    m := r.FindAllStringSubmatch(`%252525253E%252553Csvg%25252525252525252Fonload%252525252525252525252525252525252525252525252525252525253Dalert(document.domain)%252525252`,-1)
    fmt.Printf("%#v\n",m )
}

Here is a working fork of your codepen: https://codepen.io/anon/pen/XaojPp

Answer 3

I'm not sure that this is what you are looking for, but you can use the attribute :genre GenreType.new pseudo class with the s trick:

% regexp -inline -all {\d+} [regexp -inline {[^:]+$} $s]
148 365 366 367 371 120577 120578 120631 120632

:after