LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

CSS
@import url(https://fonts.googleapis.com/css?family=Oxygen);
a {
  display: inline-block;
  width: 285px;
  height: 80px;
  -webkit-clip-path: polygon(0px 0px, 245px 0px, 285px 50px, 285px 80px, 40px 80px, 0px 30px);
  clip-path: url(#shape);
  font-family: Oxygen, Agenda, Avenir, sans-serif;
  text-decoration: none;
  background-position: top center;
  background-size: cover;
  font-size: 2.2rem; 
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.4);
}
a:nth-child(1) {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/vi-hart.jpg); 
	background-position: center bottom;
}
a:nth-child(2) {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/les-tds-launch.jpg); 
	background-position: center;
}
a:nth-child(3) {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/lowell-observatory.jpg);
}
span {
  background: rgba(0,0,0,0.4); 
  transition: .8s;
  display: block; 
  width: 100%;
  height: 100%;
  padding-top: .7rem;
  padding-left: 3rem;
}
a:hover span { background: rgba(0,0,0,0); }

Description

Using clip-path to create dynamic interface elements. In-depth blog article.
Term
Mon, 11/27/2017 - 21:23

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv