Design for AIBordkarte mit Kerben
Bordkarte mit Kerben: CSS-Card. Kopiere die Regeln oder den Prompt, der das Ergebnis nachbaut.
Boarding 09:40
BER to LIS
Gate B12 · Seat 14A
14AWindow
CSS
.card-075-wrap {
display: inline-block;
filter: drop-shadow(0 8px 12px rgba(0,0,0,.1));
transition: filter .2s
}
.card-075-wrap:hover {
filter: drop-shadow(0 14px 17px rgba(0,0,0,.14))
}
.card-075 {
display: flex;
width: 360px;
background: #fff;
border-radius: 14px;
font-family: system-ui,sans-serif;
color: #111827;
-webkit-mask: radial-gradient(12px at 260px 0,transparent 98%,#000) top/100% 51% no-repeat,radial-gradient(12px at 260px 100%,transparent 98%,#000) bottom/100% 51% no-repeat;
mask: radial-gradient(12px at 260px 0,transparent 98%,#000) top/100% 51% no-repeat,radial-gradient(12px at 260px 100%,transparent 98%,#000) bottom/100% 51% no-repeat
}
.card-075__main {
flex: 1;
padding: 20px 22px;
border-right: 2px dashed #d1d5db
}
.card-075__main span {
font-size: 11px;
letter-spacing: .1em;
text-transform: uppercase;
color: #6b7280
}
.card-075 h3 {
margin: 6px 0 4px;
font-size: 26px;
letter-spacing: -.02em
}
.card-075 p {
margin: 0;
font-size: 13px;
color: #4b5563
}
.card-075__stub {
flex: 0 0 100px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: #f9fafb
}
.card-075 b {
font-size: 22px
}
.card-075 small {
font-size: 11px;
color: #6b7280
}
HTML
<div class="card-075-wrap">
<article class="card-075">
<div class="card-075__main"><span>Boarding 09:40</span><h3>BER to LIS</h3><p>Gate B12 · Seat 14A</p></div>
<div class="card-075__stub"><b>14A</b><small>Window</small></div>
</article>
</div>Prompt
Baue ein 360px Ticket im Bordkarten-Stil: weiß, 14px Radius, Schatten 0 8px 24px rgba(0,0,0,.1). Zwei halbrunde Kerben werden bei x=260px in die Ober- und Unterkante gestanzt, per zweischichtiger radial-gradient CSS-Maske (12px Radius, transparentes Zentrum). Eine 2px gestrichelte #d1d5db vertikale Linie trennt den Hauptteil (11px graue Versalien "Boarding 09:40", 26px "BER to LIS", 13px Gate-und-Sitz-Zeile) von einem 100px Abschnitt auf #f9fafb mit einem 22px fetten Sitz "14A" und einer 11px "Window" Bildunterschrift. Der Schatten vertieft sich beim Hover.