Skewed Images

CASNR campus

Option 1

CSS Transform: Skew

.img-skew { /* wrapping div around image */
  transform: skew(-15deg);
  overflow: hidden;
}

.img-skew img {
  transform: skew(15deg) scale(2);
}
CASNR campus CASNR campus

Option 2

CSS Clip Path: Polygon

.img-skew2a { /* both sides skewed */
  clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%); 
}
.img-skew2b { /* one side skewed */
  clip-path: polygon(1% 0%, 99% 0%, 76% 100%, 0% 100%);
}

Can be made into any shape! See Clippy: CSS clip-path maker.

CASNR campus

Option 3

CSS Shape Outside (wrap text around shape)

No more grid.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Etiam non quam lacus suspendisse faucibus interdum posuere lorem. Nunc vel risus commodo viverra maecenas accumsan lacus vel facilisis. Accumsan in nisl nisi scelerisque eu ultrices vitae.

.img-skew3 {
clip-path: polygon(0% 0%, 98% 0%, 73% 100%, 0% 100%);
shape-outside: polygon(0% 0%, 100% 0%, 75% 100%, 0% 100%);
float: left;
}
CASNR campus

Option 3A

CSS Shape Outside - Mobile Friendly

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Etiam non quam lacus suspendisse faucibus interdum posuere lorem. Nunc vel risus commodo viverra maecenas accumsan lacus vel facilisis. Accumsan in nisl nisi scelerisque eu ultrices vitae.

.img-skew4 {
clip-path: polygon(0% 0%, 98% 0%, 73% 100%, 0% 100%);
shape-outside: polygon(0% 0%, 100% 0%, 75% 100%, 0% 100%);
float: left;
}
CASNR campus

Option 4

CSS Triangle

Grid is back.

.img-skew4 {
  position: relative;
  overflow: hidden;
  line-height: 1;
}

.img-skew4 img {
  width: 100%;
}

.img-skew4:after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-top: 800px solid transparent;
  border-right: 250px solid #EBEBEA;
  right: 0;
  top: 0;
  bottom: 0;
}