# Abgeschrägtes Ticket (C 074)

Kategorie: Cards  
Tags: corner-shape, bevel, ticket, modern-css, fallback, dark  
Seite: https://designforai.dev/de/snippet/card-074

## Prompt

Erstelle eine 260px dunkle Ticket-Card (#111827, 22px 24px Padding) mit abgeschrägten Ecken oben links und unten rechts. Fallback: ein clip-path Polygon, das 16px Diagonalen von diesen beiden Ecken abschneidet. Unter @supports (corner-shape: bevel) den clip-path weglassen und corner-shape: bevel mit 18px Radius nur auf den Ecken oben links und unten rechts nutzen. Inhalt: 11px bernsteinfarbener #fbbf24 Versalien-Kicker "Admit one", 20px weißer Titel, 13px #9ca3af Sitzzeile. Der Hintergrund hellt beim Hover auf #1f2937 auf.

## HTML

```html
<article class="card-074">
  <span class="card-074__kicker">Admit one</span>
  <h3>Rooftop screening</h3>
  <p>Row F · Seat 12</p>
</article>
```

## CSS

```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
}
```