design: 票券头部改裁切式——色块无框由 overflow:hidden 统一裁边,单线描边填满圆角,打孔成半圆缺口
This commit is contained in:
1 parent
4451ca9ee1
commit
68f4522ac4
2 files changed
+6
-5
No files matched your search
@@ -55,10 +55,11 @@
|
||||
.msticket {
|
||||
width: 216px; background: #fff9f0; border: 2px solid #111111; border-radius: 12px;
|
||||
box-shadow: 5px 5px 0 #111111; position: relative; display: flex; align-items: stretch;
|
||||
overflow: hidden;
|
||||
}
|
||||
.msticket .tl {
|
||||
width: 56px; border: 2px solid #111111; border-left: none; border-radius: 10px 0 0 10px;
|
||||
display: flex; align-items: center; justify-content: center; font-size: 22px; margin-left: -2px;
|
||||
width: 56px; flex: none;
|
||||
display: flex; align-items: center; justify-content: center; font-size: 22px;
|
||||
}
|
||||
.msticket .tb { flex: 1; padding: 9px 10px; }
|
||||
.msticket .tb b { font-size: 12.5px; }
|
||||
@@ -69,11 +70,11 @@
|
||||
font-family: "DejaVu Sans Mono", monospace; font-size: 9.5px; color: #8a7a5c;
|
||||
}
|
||||
.msticket.pk::before, .msticket.pk::after {
|
||||
content: ""; position: absolute; left: 162px; width: 13px; height: 13px;
|
||||
content: ""; position: absolute; left: 160px; width: 14px; height: 14px;
|
||||
border-radius: 50%; background: #fbfbfa; border: 2px solid #111111;
|
||||
}
|
||||
.msticket.pk::before { top: -9px; }
|
||||
.msticket.pk::after { bottom: -9px; }
|
||||
.msticket.pk::before { top: -10px; }
|
||||
.msticket.pk::after { bottom: -10px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
Reference in new issue
Block a user