Saya ingin membuat butang dalam bentuk tanda jalan (segi empat tepat dengan hujung).

_______
|       \
|_______/

Saya mahu menulis teks secara dinamik ke dalam logo, setiap teks mempunyai panjang yang berbeza. Jika saya mencuba ini hanya menggunakan grafik sebagai grafik latar belakang, skala anak panah dan mampatkan/regangkan dengan sewajarnya. Jadi letakkan teks dalam div biasa dan gunakan CSS :after untuk menambahkan anak panah sebagai SVG. Anak panah harus diisi sepenuhnya, iaitu saya tidak perlu berurusan dengan isu pembingkaian. (Saya meninggalkan SVG hitam untuk meningkatkan keterlihatan) Masalah pertama saya ialah anak panah sentiasa berada di dalam blok dan bukan di belakangnya. Saya menyelesaikan masalah ini menggunakan position:absolute;. Tetapi penalaan halus lagi gagal kerana saya tidak dapat meletakkan kedudukan berdasarkan hujung kiri: dan kanan: blok

Soalan:

• Bagaimana saya meletakkannya supaya segitiga sentiasa bersambung tepat ke hujung kotak. (Tiada putih di tengah)

• Cara skala SVG berdasarkan saiz (ketinggian) kotak. (supaya tepinya muat) (mungkin juga mengambil kira padding)

.querverweis{
    background-color: #005000;
    color: #ffffff;
    display: inline-block;
     margin: 10px  
     margin-left: -10px 
}

.querverweis:after {
  content:  url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='32' height='40' viewBox='0 0 66 100' xml:space='preserve'%3E%3Cpath d='M0 0 L66 50 L0 100 L0 0' style='fill=rgb(0,0,0)'/%3E%3C/svg%3E%0A");   
  position: absolute; 
}

<div class="querverweis">Test</div>