Design for AITicket biselado
Ticket biselado: tarjeta en CSS. Copia las reglas, o el prompt que reproduce el resultado.
Rooftop screening
Row F · Seat 12
CSS
.card-074 {
width: 260px;
padding: 22px 24px;
background: #111827;
color: #f9fafb;
font-family: system-ui,sans-serif;
clip-path: polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px);
transition: background .2s
}
@supports (corner-shape:bevel) {
.card-074 {
clip-path: none;
corner-shape: bevel;
border-radius: 0 0 18px 0;
border-top-left-radius: 18px
}
}
.card-074:hover {
background: #1f2937
}
.card-074__kicker {
font-size: 11px;
letter-spacing: .14em;
text-transform: uppercase;
color: #fbbf24
}
.card-074 h3 {
margin: 8px 0 4px;
font-size: 20px
}
.card-074 p {
margin: 0;
font-size: 13px;
color: #9ca3af
}
HTML
<article class="card-074">
<span class="card-074__kicker">Admit one</span>
<h3>Rooftop screening</h3>
<p>Row F · Seat 12</p>
</article>Prompt
Crea una tarjeta ticket oscura de 260px (#111827, padding 22px 24px) con las esquinas superior izquierda e inferior derecha biseladas. Fallback: un polígono clip-path que corta diagonales de 16px en esas dos esquinas. Bajo @supports (corner-shape: bevel) elimina el clip-path y usa corner-shape: bevel con radio 18px solo en las esquinas superior izquierda e inferior derecha. Contenido: kicker ámbar #fbbf24 11px en mayúsculas "Admit one", título blanco 20px, línea de asiento 13px #9ca3af. El fondo aclara a #1f2937 en hover.