一個優惠券的鏤空效果：

HTML

<widget type="ticket" class="--flex-column"> <div class="top --flex-column"><div class="bandname -bold">Ghost Mice</div><div class="tourname">Home Tour</div><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/199011/concert.png" alt="" /><div class="deetz --flex-row-j!sb"><div class="event --flex-column"><div class="date">3rd March 2017</div><div class="location -bold">Bloomington, Indiana</div></div><div class="price --flex-column"><div class="label">Price</div><div class="cost -bold">$30</div></div> </div> </div><div class="rip"></div><div class="bottom --flex-row-j!sb"><div class="barcode"></div><a class="buy" href="#">BUY TICKET</a></div> </widget>

CSS

body {background-image: linear-gradient(-45deg, #8067B7, #EC87C0);min-height: calc(100vh - 40px);margin: 20px;font-family: 'Lato', sans-serif;display: flex;justify-content: center;align-items: center;widget {filter: drop-shadow(1px 1px 3px rgba(0, 0, 0, 0.3));&[type="ticket"] {width: 255px;.top,.bottom {>div {padding: 0 18px;&:first-child {padding-top: 18px;}&:last-child {padding-bottom: 18px;}}img {padding: 18px 0;}}.top,.bottom,.rip {background-color: #fff;}.top {border-top-right-radius: 5px;border-top-left-radius: 5px;.deetz {padding-bottom: 10px !important;}}.bottom {border-bottom-right-radius: 5px;border-bottom-left-radius: 5px;padding: 18px;height: 30px;padding-top: 10px;.barcode {background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAF4AAAABCAYAAABXChlMAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuOWwzfk4AAACPSURBVChTXVAJDsMgDOsrVpELiqb+/4c0DgStQ7JMYogNh2gdvg5VfXFCRIZaC6BOtnoNFpvaumNmwb/71Frrm8XvgYkker1/g9WzMOsohaOGNziRs5inDsAn8yEPengTapJ5bmdZ2Yv7VvfPN6AH2NJx7nOWPTf1/78hoqgxhzw3ZqYG1Dr/9ur3y8vMxgNZhcAUnR4xKgAAAABJRU5ErkJggg==);background-repeat: repeat-y;min-width: 58px;}.buy {display: block;font-size: 12px;font-weight: bold;background-color: #5D9CEC;padding: 0 18px;line-height: 30px;border-radius: 15px;color: #fff;text-decoration: none;}}.rip {height: 20px;margin: 0 10px;background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAACCAYAAAB7Xa1eAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuOWwzfk4AAAAaSURBVBhXY5g7f97/2XPn/AcCBmSMQ+I/AwB2eyNBlrqzUQAAAABJRU5ErkJggg==);background-size: 4px 2px;background-repeat: repeat-x;background-position: center;position: relative;box-shadow: 0 1px 0 0 #fff, 0 -1px 0 0 #fff;&:before,&:after {content: '';position: absolute;width: 20px;height: 20px;top: 50%;transform: translate(-50%, -50%) rotate(45deg);border: 5px solid transparent;border-top-color: #fff;border-right-color: #fff;border-radius: 100%;pointer-events:none;}&:before {left: -10px;}&:after {transform: translate(-50%, -50%) rotate(225deg);right: -40px;}}}.-bold {font-weight: bold;}} }

效果圖

總結

以上是生活随笔為你收集整理的优惠券的镂空效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。