如何用纯 CSS 创建带有虚线的票证形状?
How can I create a ticket shape with dotted line with pure CSS?
我想用纯 css 创建一个票证形状(4 个角用圆圈剪裁),但是我在尝试为其添加边框时遇到了一些困难。我试图处理 box-shadow 但我失败了。我试图用两种风格来制作它-
1. 我可以为包括圆角在内的整个形状设置 3px 边框
2. 我可以为整个形状设置一个 3px 的边框,但采用虚线样式
因为我对box-shadow不是很熟悉,很难实现我想要的风格。谁能给我一些提示吗?太感谢了。
.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>
这里有一个想法,您还可以在伪元素上使用虚线边框,同时隐藏主元素的一些边框:
.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>
我想用纯 css 创建一个票证形状(4 个角用圆圈剪裁),但是我在尝试为其添加边框时遇到了一些困难。我试图处理 box-shadow 但我失败了。我试图用两种风格来制作它- 1. 我可以为包括圆角在内的整个形状设置 3px 边框 2. 我可以为整个形状设置一个 3px 的边框,但采用虚线样式
因为我对box-shadow不是很熟悉,很难实现我想要的风格。谁能给我一些提示吗?太感谢了。
.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>
这里有一个想法,您还可以在伪元素上使用虚线边框,同时隐藏主元素的一些边框:
.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>