如何使用纯CSS用虚线创建票证形状？

Question

我想创建一个带有纯css的票证形状（带有四个用圆角裁剪的圆角），但是在尝试为其添加边框时遇到了一些困难。 我曾尝试处理阴影，但失败了。 我正在尝试使用两种样式制作它：1.我可以为整个形状（包括圆角）设置3px边框2.我可以为整个形状使用3px边框，但以虚线样式

因为我对盒子阴影并不十分熟悉，所以很难实现所需的样式。 有人可以给我一些提示吗？ 非常感谢。

 .ticket { font-family: Arial; font-size: 12px; font-weight: bold; position: relative !important; background: #4a4a4a; float: left; padding: 35px 30px; margin: 0 50px 50px 0; } .ticket:after { content: ""; position: absolute !important; z-index: 100; top:0; left: 0; border-right: #fff 7px solid; border-bottom: #fff 7px solid; -moz-border-radius: 0 0 20px 0; -webkit-border-radius: 0 0 20px 0; border-radius: 0 0 20px 0; background-color: white; } .ticket:before { content: ""; position: absolute !important; z-index: 100; top: 0; right: 0; border-left: #fff 7px solid; border-bottom: #fff 7px solid; -moz-border-radius: 0 0 0 20px; -webkit-border-radius: 0 0 0 20px; border-radius: 0 0 0 20px; } .ticket a { padding: 35px 35px 35px 20px; text-decoration: none; color: #fff; white-space: nowrap; } .ticket a:hover {color: rgba(0,0,0,0.5);} .ticket a:after { content: ""; position: absolute !important; z-index: 100; bottom: 0; left: 0; border-right: #fff 7px solid; border-top: #fff 7px solid; -moz-border-radius: 0 20px 0 0; -webkit-border-radius: 0 20px 0 0; border-radius: 0 20px 0 0; } .ticket a:before { content: ""; position: absolute !important; z-index: 1000; bottom: 0; right: 0; border-left: #fff 7px solid; border-top: #fff 7px solid; -moz-border-radius: 20px 0 0 0; -webkit-border-radius: 20px 0 0 0; border-radius: 20px 0 0 0; } 

 <div class="ticket"><a href="#">Box A</a></div> <div class="ticket"><a href="#">Box B</a></div> <div class="ticket"><a href="#">Box C</a></div> <div class="ticket"><a href="#">Box D</a></div> 

Answer 1

这是一个想法，您还可以在伪元素上使用虚线边框，同时从主要元素隐藏一些边框：

 .ticket { font-size: 20px; position: relative; background: #4a4a4a; float: left; padding: 35px 30px; margin:20px; border:4px dotted #fff; } .ticket:after, .ticket:before, .ticket a:after, .ticket a:before { content: ""; position: absolute; z-index: 1; width: 15px; height: 15px; background: linear-gradient(#fff,#fff) padding-box, #4a4a4a; } .ticket:after { top: -5px; left: -5px; border-right: #fff 5px dotted; border-bottom: #fff 5px dotted; border-radius: 0 0 20px 0; } .ticket:before { top: -5px; right: -5px; border-left: #fff 5px dotted; border-bottom: #fff 5px dotted; border-radius: 0 0 0 20px; } .ticket a { padding: 35px; text-decoration: none; color: #fff; } .ticket a:after { bottom: -5px; left: -5px; border-right: #fff 5px dotted; border-top: #fff 5px dotted; border-radius: 0 20px 0 0; } .ticket a:before { bottom: -5px; right: -5px; border-left: #fff 5px dotted; border-top: #fff 5px dotted; border-radius: 20px 0 0 0; } 

 <div class="ticket"><a href="#">Box A</a></div>