3 Câu hỏi: Làm thế nào để tôi chia tỷ lệ các điểm cụ thể trong khi để các điểm khác một mình?

câu hỏi được tạo ra tại Wed, May 8, 2019 12:00 AM

Tôi có một SVG được tạo bằng một poly được sử dụng cho đường viền neo. Một vấn đề tôi gặp phải là tôi muốn nút hỗ trợ nội dung thay đổi - cho phép nút thay đổi kích thước theo chiều ngang khi cần thiết để phù hợp, trong khi hạn chế góc của các đường bên.

Tôi dường như không thể tìm ra nếu tôi cần phải giải quyết bằng cách nào đó bằng cách tách poly gốc, điều chỉnh viewBox hoặc cái gì. Chúng tôi đang bối rối.

SVG nội tuyến tôi đang sử dụng khá cơ bản:

* { 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>

Tôi đã tạo một bản demo có thể chỉnh sửa tại đây: https://jsfiddle.net/32wcq1zr/1/ - so sánh góc cạnh của nút thứ nhất so với nút thứ hai. Lý tưởng nhất là tôi muốn có chức năng của nút thứ hai nhưng với một góc nhất quán của các đường bên.

    
1
3 Câu trả lời                              3                         

Với hình dạng đặc biệt này, các tùy chọn khác được trình bày ở đây (sử dụng pseudo phần tử hoặc masks) là giải pháp tốt hơn. Tuy nhiên, đây là một lựa chọn tốt cho các hình dạng phức tạp hơn.

CSS border-image đã xuất hiện được một thời gian, có hỗ trợ khá tốt , AND cho phép chia tỷ lệ 9 lát .

Chia tỷ lệ 9 lát cho phép bạn quyết định "cách" từng phần của tỷ lệ hình ảnh bằng cách chia hình ảnh thành góc phần tư đại diện cho cả 4 góc, 4 cạnh & trung tâm.

Bạn có thể sử dụng border-image với hình ảnh hoặc SVG, nhưng hình ảnh thì đơn giản hơn nhiều. Chirs Coyer có tổng quan tốt .

Đây là một ví dụ sử dụng hình dạng của bạn

Lưu ý: sẽ hữu ích nếu bạn sử dụng hình ảnh có kích thước giúp toán học dễ dàng

 nhập mô tả hình ảnh tại đây (100px x 40px với phần dưới cùng 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>

Và hình dạng phức tạp hơn để hiển thị cách thức hoạt động của nó:

 nhập mô tả hình ảnh tại đây

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

Đây là một giải pháp thay thế cho vấn đề của bạn. Thay vì sử dụng SVG, điều này có thể được thực hiện với các đường viền trong suốt và văn bản thành một :: trước /:: sau

.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
Nói chung,

"Căng thẳng" như bạn đang có, nói chung là không thể.

Nhưng trong một số trường hợp nhất định có thể đạt được, sử dụng một số thủ thuật với các yếu tố <use><mask>.

Cách thức hoạt động này là chúng tôi chia nút thành hai hình dạng. Một cho đầu bên trái (#left), và một cho đầu giữa và bên phải (#right). Một bên phải được thực hiện rất dài để nó có thể chứa một loạt các kích cỡ nút. Phần bên phải được đặt ở phía bên phải của SVG và được che đi để nó không che phần bên trái.

* { 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>
    
1
2019-05-09 03: 21: 44Z
nguồn đặt đây