slash banner basic

by ian_smithz

HTML

<link rel="stylesheet" href="https://www.screwfix.com/assets/css/sfx.min.css">
<div class="home-page">




<main id="container-main" class="wrp">
<div class="inner">
<div class="hero-hpusbsockets slash slash--black bg-black">
			
				<a href="http://www.screwfix.com/c/electrical-lighting/switches-sockets/cat830530?brand=lap&switchessocketsproducttype=socket_with_usb&modelno=422U3W|EBS22U3W|EBS22U3B|SBS22U3W|EPC22U3W|EPC22U3B|SPC22U3W|SBN22U3B|EBN22U3B&cm_sp=homepage-_-promo-_-lapusbsockets" class="banner banner--freetype banner--var1" title="New LAP 3.1A USB Sockets ">
					<div class="banner__wrapper" style="background: url(http://www.screwfix.com/images/CAT127/assets/gfx/hp-cat127-hero-usbsockets_lg.png) no-repeat">
						<div class="banner__content-wrapper">
							<div class="banner__content">
								<p class="banner__title">
									<span class="banner__text--large">New</span>
									<span class="banner__text--small"></span>
									<span class="banner__text--small"></span>
								</p>	
								<p class="banner__text">
									<span>LAP 3.1A USB Sockets </span>
									<span></span>
									<span></span>
								</p>
							</div>
						</div>
						<div class="banner__img-align">
							<img src="" alt="" class="banner__img swap" data-src-small="" data-src-medium="" data-src-large="" data-alt=""/>
						</div>
				
						
					</div>
				</a>
			
</div>
</div>
</main>



</div>

CSS

/* base class of red slash angle  */

.slash .banner__content-wrapper:after {
  display: block;
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  top: 0;
  right: -105px !important;
  border-top: 0 !important;
  border-bottom: 356px solid transparent !important;
  border-left: 105px solid #ed1c24 !important;
}

/* mobile */

@media (max-width: 40em) {
  .slash .banner__content-wrapper:after {
    right: -75px !important;
    border-top: 0 !important;
    border-bottom: 192px solid transparent !important;
    border-left: 75px solid #ed1c24 !important;
  }
}

/* modify colour of slash angle */

.slash.slash--black .banner__content-wrapper:after {
  border-left-color: #000 !important
}

/* demo classes to change colour of background to blue or white */

.slash.bg-black .banner__content-wrapper {
  background: #000 !important
}


/*Full width banner take over*/

.home-page .full_width_wrp {
  position: relative;
  background-color: #f5821f;
  margin-bottom: 18px;
}

.home-page .banner-mg-wrap,
.home-page .banner-mg-wrap img {
  height: 382px;
}

@media (max-width:40.063em) {
  .home-page .banner-mg-wrap,
  .home-page .banner-mg-wrap img {
    height: 213px;
  }
}

@media (max-width:64em) and (min-width:40.063em) {
  .home-page .banner-mg-wrap,
  .home-page .banner-mg-wrap img {
    height: 304px;
  }
}

/*End full width banner take over*/

.home-page .dotd-inner--alt {
  overflow: hidden;
  height: 100%;
  background: #000
}

.home-page .banner__content-wrapper--alt .banner__content--alt {
  position: relative;
  display: table-cell;
  vertical-align: middle
}

.home-page .banner__content-wrapper--alt .dot-header--alt {
  position: relative;
  color: #fff;
  font-family: screwfix_betaheavy;
  font-size: 60px;
  text-align: center;
  width: 100%
}

.home-page .banner__product-panel--alt {
  padding-left: 11px
}

.home-page .banner__prod-title--alt {
  color: #fff;
  max-width: 100%;
  font-family: screwfix_betaheavy;
  text-align: center
}

.home-page...