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">
			
				<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 class="lg-12 md-24 sm-24 hero-hpusbsockets slash">
			
				<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 banner--half" 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...

CSS

.slash .banner__bg-overlay {
  background-repeat: no-repeat;
  position: absolute;
  z-index: 3;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

/* overlay + background on mobile */

.slash .banner__wrapper,
.slash .banner__bg-overlay {
  background-position: calc(0% + 140px) !important;
}

/* overlay + background on tablet */

@media (min-width: 641px) {
  .slash .banner__wrapper,
  .slash .banner__bg-overlay {
    background-position: calc(0% + 250px) !important;
  }
}

/* overlay + background on desktop */

@media (min-width: 1025px) {
  .slash .banner__wrapper,
  .slash .banner__bg-overlay {
    background-position: calc(100% + 0px) !important;
  }
}

/* half banner overlay + background on tablet */

@media (min-width: 641px) {
  .slash .banner--half .banner__wrapper,
  .slash .banner--half .banner__bg-overlay {
    background-position: calc(0% + 250px) !important;
  }
}

/* half banner overlay + background on desktop */

@media (min-width: 1025px) {
  .slash .banner--half .banner__wrapper,
  .slash .banner--half .banner__bg-overlay {
    background-position: calc(100% + 384px) !important;
  }
}

/* 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--white .banner__content-wrapper:after {
  border-left-color: #fff !important
}

.slash.slash--blue .banner__content-wrapper:after {
  border-left-color: #0053a0 !important
}

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