slash banner basic

by ian_smithz

HTML

<div class="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" title="New LAP 3.1A USB Sockets ">
					<div class="banner__wrapper">
						<div class="slash__content">
							<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>
				</a>
			
</div>

CSS

/* base class of red slash angle  */

.slash .slash__content: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 .slash__content: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 .slash__content:after {
  border-left-color: #000 !important
}

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

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




.banner {
    position: relative;
    display: block;
    overflow: hidden;
    /*height: 376px;*/
    background-color: #fff;
    border: 1px solid red;
}

.slash__content {
    background: #ed1c24;
    width: 290px;
    color: #fff;
    height: 356px;
    position: relative;
    text-transform: uppercase;
    display: table;
}