Image in Widget beschneiden

[lenschith]

Hallo zusammen,
ich hätte mal eine Frage an die Widgetbauer. Leider finde ich nichts passendes.
Ich habe ein Widget, dort möchte ich ein Image platzieren das über den F7-Card Rand hinaus steht.
Ich möchte gerne das Image beschneiden das es auch mit dem Card Ende aufhört und nicht darüber hinaussteht.

Code: Alles auswählen

component: f7-card
config:
  style:
    background-color: "=props.bgcolor ? props.bgcolor : ''"
    background-height: 50px
    background-position: right -30px center
    background-repeat: no-repeat
    background-size: contain
    border-radius: var(--f7-card-expandable-border-radius)
    box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
    class:
      - padding: 0px
      - overflow: hidden
      - position: relative
    height: 130px
    margin-left: 5px
    margin-right: 5px
    noShadow: false
    opacity: 70%

Code: Alles auswählen

    - component: oh-image
      config:
        style:
          height: 160px
          width: auto
          opacity: 1
          right: -30px
          top: 0
          position: absolute
          transform: rotate(45deg)
        url: /static/flaticon/windrose_new.svg

Screenshot 2024-01-22 175611.png

Hintergrund wird sein das sich das Bild in der Ecke über eine Variable automatisch drehen sollte wenn sich ein Item ändert.

Gibt es da eine Möglichkeit das abzuschneiden. Beim Backgroundbild geht das aber das kann ich nicht drehen. Da dreht es mir immer die komplette Card.

Hat jemand eine Idee wie das funktionieren könnte?
Gruß Lenschi

[lenschith]

ich glaube ich habs gefunden: clip-path: border-box

Code: Alles auswählen

    - component: f7-block
      config:
        style:
          position: absolute
          top: 0
          right: 0
          width: 100%
          height: 130px
          clip-path: border-box