Buat papan tanda berskala menggunakan HTML, CSS dan SVG

Question

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)

Atau adakah saya benar-benar berada di landasan yang salah dengan pendekatan selepas, dan patutkah saya menambahkan anak panah (sebagai fail SVG) terus dalam HTML selepas teks (teks disertakan dengan ) dan membungkus semuanya dengan ? Tetapi sebenarnya saya ingin mengelakkan ini dan memasukkan melalui CSS akan menjadi lebih baik. Tetapi jika ini adalah cara yang lebih berguna, saya ok dengannya.

.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>

Answer 1

Seperti yang A Haworth nyatakan, jalan keratan mungkin lebih mudah. Untuk melakukan ini, tambahkan beberapa padding ，以便始终为箭头所在的位置留出空间，然后将 clip-path di sebelah kanan butang dan tambahkan keseluruhan elemen pada

.querverweis {
  position: relative;
  background-color: #005000;
  color: #ffffff;
  display: inline-block;
  padding: 0.5rem 1.5rem 0.5rem 0.5rem;
  clip-path: polygon(0% 0%, calc(100% - 1rem) 0, 100% 50%, calc(100% - 1rem) 100%, 0% 100%);
}

Test




Test with more text




Test with multi-line text