3 Soalan: Bagaimanakah saya menilai mata tertentu sambil meninggalkan mata lain sahaja?

soalan dicipta di Wed, May 8, 2019 12:00 AM

Saya mempunyai SVG yang dibuat dengan poli tunggal yang digunakan untuk sempadan utama. Masalah yang saya jalankan ialah saya ingin butang untuk menyokong kandungan berubah-ubah - membenarkan butang untuk mengubah saiz secara mendatar seperti yang diperlukan untuk menyesuaikan, sambil menghalang sudut garisan tepi.

Saya tidak mungkin memikirkan jika saya perlu menangani apa-apa dengan memecahkan poli asal, menyesuaikan viewbox, atau apa. Kami terbantut.

SVG sebaris yang saya gunakan adalah agak asas:

* { box-sizing: border-box; }

.btn {
  width: 198px;
  display: inline-block;
  background: transparent;
  margin: 2px 0;
  padding: 0;
  height: 41px;
  text-align: center;
  font-size: 10px;
  line-height: 41px;
  font-weight: 600;
  font-family: sans-serif;
  text-transform: uppercase;
  color: #FFF;
  position: relative;
  transition: all ease-in-out 0.3s; }
  .btn.btnFluid {
    width: auto; }
    .btn.btnFluid svg {
      width: 100%;
      height: 41px; }
  .btn svg polygon {
    fill: #000;
    transition: fill 0.3s ease;
    stroke: #002b5d;
    stroke-width: 2; }
  .btn:hover {
    color: #000; }
    .btn:hover svg polygon {
      stroke: #000;
      fill: #FFF; }
  .btn span {
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: block;
    padding: 0 25px; }

svg:not(:root) {
  overflow: hidden; }

  
<a href="#" class="btn">
  <svg xmlns="http://www.w3.org/2000/svg" class="btn-svg" viewBox="0 0 386.16 80">
    <polygon points="346.14 78 40.02 78 3.19 2 382.97 2 346.14 78"></polygon>
   </svg>
  <span>Read More</span>
</a>
<br><br>
<a href="#" class="btn btnFluid">
  <svg xmlns="http://www.w3.org/2000/svg" class="btn-svg" viewBox="0 0 386.16 80" preserveAspectRatio="none">
    <polygon points="346.14 78 40.02 78 3.19 2 382.97 2 346.14 78"></polygon>
  </svg>
  <span>A much longer cta button label</span>
</a>

Saya telah membuat demo yang boleh diedit di sini: https://jsfiddle.net/32wcq1zr/1/ - bandingkan sudut pinggir tepi butang pertama berbanding butang kedua. Sebaik-baiknya, saya ingin mempunyai fungsi butang kedua tetapi dengan sudut konsisten garis sebelah.

    
1
3 Jawapan                              3                         

Dengan bentuk tertentu ini, pilihan lain yang dibentangkan di sini (menggunakan pseudo elemen atau masks) adalah penyelesaian yang lebih baik. Bagaimanapun, ini merupakan alternatif yang baik untuk bentuk yang lebih rumit.


CSS border-image telah wujud untuk seketika, mempunyai sokongan yang cukup baik DAN membolehkan kepingan 9-keping .

Pengikisan 9-slice membolehkan anda membuat keputusan "bagaimana" setiap bahagian skala imej dengan memecah imej menjadi kuadran yang mewakili semua 4 sudut, 4 sisi & pusat.

Anda boleh menggunakan border-image dengan sama ada imej atau SVG, tetapi imej adalah lebih lurus ke hadapan. Chirs Coyer mempunyai gambaran keseluruhan yang baik .

Berikut adalah contoh menggunakan bentuk anda

Nota: ia membantu jika anda menggunakan imej dengan dimensi yang menjadikan matematik mudah

 masukkan keterangan imej di sini (100px x 40px dengan inset bawah 20px)

a {
  display:inline-block;
  text-decoration: none;
  margin: 10px;
  color: #fff;
  padding: 0 10px;
  border: 20px solid black;
  border-image: url(https://i.stack.imgur.com/T8TC6.png);
  border-image-slice: 0 20% fill;
  border-image-width: auto;
}
<a href="#">short</a>

<a href="#">much longer text that causes things to scale</a>

Dan bentuk yang lebih kompleks untuk menunjukkan cara kerjanya:

 masukkan keterangan imej di sini

a {
  display:inline-block;
	text-decoration:none;
  margin: 10px;
	color: #fff;
	padding: 0 10px;
	border: 20px solid;
  border-image: url(https://i.stack.imgur.com/pUwi4.png);
	border-image-slice: 15 fill;
	border-image-width: auto;
	border-image-repeat: round;
}
<a href="#">short</a>

<a href="#">much longer text that causes things to scale</a>
    
2
2019-05-08 21: 57: 48Z

Ini adalah penyelesaian alternatif kepada masalah anda. Daripada menggunakan SVG ini boleh dilakukan dengan sempadan telus dan teks ke dalam :: sebelum /:: selepas

.button {
  --h:50;
  width: 198px;
  display: inline-block;
  border: calc(var(--h) * 1px) solid black;
  border-left-color: transparent;
  border-right-color: transparent;
  border-bottom: none;
  position:relative;
}

.button::before {
  content: "Read More";
  color: white;
  display: block;
  width: 100%;
  height:calc(var(--h) * 1px);
  position: absolute;
  top: calc(var(--h) * -1px);
  left: 0;
  text-align: center;
  line-height:calc(var(--h) * 1px);
  font-weight: 600;
  font-family: sans-serif;
  text-transform: uppercase;
}

.button.long{width:300px}

.button.long::before{content:"A much longer cta button label"}
<div class="button"></div>
<div class="button long"></div>
    
1
2019-05-08 18: 37: 22Z

"Sertifikat" Sertifikat "Sertifikat" seperti yang anda lakukan adalah, secara umum, tidak mungkin.

Tetapi dalam keadaan tertentu ia mungkin dapat dicapai, menggunakan beberapa helah dengan elemen 060035099111110101035062 dan <use>.

Bagaimana ini berfungsi ialah kita memecahkan butang ke dalam dua bentuk. Satu untuk hujung sebelah kiri (<mask>), dan satu untuk hujung pertengahan dan kanan (#left). Yang betul dibuat sangat panjang supaya ia dapat menampung pelbagai saiz butang. Bahagian kanan diletakkan di bahagian kanan tangan SVG, dan bertopeng sehingga tidak menutup bahagian kiri.

#right
    
1
2019-05-09 03:21:21
* { box-sizing: border-box; }

.btn {
  width: 198px;
  display: inline-block;
  background: transparent;
  margin: 2px 0;
  padding: 0;
  height: 41px;
  text-align: center;
  font-size: 10px;
  line-height: 41px;
  font-weight: 600;
  font-family: sans-serif;
  text-transform: uppercase;
  color: #FFF;
  position: relative;
  transition: all ease-in-out 0.3s; }
  .btn.btnFluid {
    width: auto; }
    .btn.btnFluid svg {
      width: 100%;
      height: 41px; }
  .btn svg .highlight {
    fill: #000;
    transition: fill 0.3s ease;
    stroke: #002b5d;
    stroke-width: 2; }
  .btn:hover {
    color: #000; }
    .btn:hover svg .highlight {
      stroke: #000;
      fill: #FFF; }
  .btn span {
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: block;
    padding: 0 25px; }

svg:not(:root) {
  overflow: hidden; }
<a href="#" class="btn">
  <svg class="btn-svg" width="100%">
    <defs>
      <polyline id="left" points="21,1, 1,1, 20,40, 21,40"/>
      <polyline id="right" points="-1500,1, -1,1, -20,40, -1500,40"/>
      <mask id="mask-right">
        <rect width="100%" height="100%" fill="white"/>
        <rect width="20" height="100%" fill="black"/>
      </mask>
    </defs>
    <g class="highlight" mask="url(#mask-right)">
      <use xlink:href="#right" x="100%"/>
    </g>
    <use class="highlight" xlink:href="#left"/>
  </svg>
  <span>Read More</span>
</a>
<br><br>
<a href="#" class="btn btnFluid">
  <svg class="btn-svg" width="100%">
    <defs>
      <polyline id="left2" points="21,1, 1,1, 20,40, 21,40"/>
      <polyline id="right2" points="-1500,1, -1,1, -20,40, -1500,40"/>
      <mask id="mask-right2">
        <rect width="100%" height="100%" fill="white"/>
        <rect width="20" height="100%" fill="black"/>
      </mask>
    </defs>
    <g class="highlight" mask="url(#mask-right2)">
      <use xlink:href="#right" x="100%"/>
    </g>
    <use class="highlight" xlink:href="#left2"/>
  </svg>
  <span>A much longer cta button label</span>
</a>
sumber diletakkan di sini
Soalan lain