Ticket Banner link from gc-nomade's code.
A Pen by Stuart Schmukler on CodePen.
<img src="https://i.stack.imgur.com/B8JYb.png"/> | |
<a href="#"> <b>Enter the Forever Tango Ticket Contest </b></a> |
a { | |
margin:1em 3em; | |
font-family:arial; | |
font-size:18px; | |
text-decoration:none; | |
position:relative; | |
display:inline-block; | |
padding:1.5em 5em; | |
text-transform:uppercase; | |
overflow:hidden; | |
color:white; | |
border:3px solid white; | |
border-left:none; | |
border-right:none; | |
background:linear-gradient(to left, white 3px, transparent 3px, transparent calc(100% - 3px), white calc(100% - 3px)) top left no-repeat,linear-gradient(to left, white 3px, transparent 3px, transparent calc(100% - 3px), white calc(100% - 3px)) bottom left no-repeat; | |
background-size:100% 1.45em; | |
} | |
a:before,a:after { | |
z-index:-1; | |
content:''; | |
position:absolute; | |
height:1.2em; | |
width:1.2em; | |
top:1.4em; | |
border-radius:50%; | |
border:3px solid white; | |
box-shadow:0 0 0 10em #102229; | |
} | |
a:before { | |
left:-0.7em; | |
}a:after { | |
right:-0.7em; | |
} | |
b:after { | |
content:''; | |
display:inline-block; | |
padding:0.325em; | |
transform:rotate(45deg); | |
color:#DA153E;vertical-align:-1px; | |
border:solid; | |
border-left:none; | |
border-bottom:none; | |
} | |
body { | |
background:url(http://lorempixel.com/800/300); | |
} | |
img { | |
margin:auto; | |
} |
<link href="https://codepen.io/gc-nomade/pen/KVevEW" rel="stylesheet" /> |