Hướng dẫn css arrow pointer shape - hình dạng con trỏ mũi tên css

Đây là tốt nhất tôi có thể đưa ra bằng cách sử dụng hình ảnh calc và 1PX. Tôi cũng tưởng tượng kỹ thuật này cũng hoạt động với Square .

Những nhược điểm của điều này là:

• Tôi không thể nghĩ ra một cách để tính toán hoàn hảo chiều rộng thanh để trừ đầu mũi tên nhô ra.
• Không hoàn toàn CSS. Nhưng điều này hoạt động tuyệt vời khi bạn đã sử dụng khung thành phần.

Mẹo

Tôi không chắc có cách tạo ra một hình vuông động với chiều cao ở mức 100%. Điều ngược lại là hoàn toàn có thể mặc dù. https://spin.atomicobject.com/2015/07/14/css-responsive-square/

Giải pháp ở đây là sử dụng hình ảnh vuông để khai thác khả năng của trình duyệt để duy trì tỷ lệ khung hình hình ảnh.

Đây là hình ảnh PNG trong suốt 1PX tôi tìm thấy trực tuyến. Chúng ta cũng nên lưu ý rằng chúng ta không thể sử dụng ::before hoặc ::after với hình ảnh.

Biên giới

CSS không thể làm biên giới với các hình dạng lẻ, nhưng chúng ta có thể hack nó. Ở đây tôi đang sử dụng box-shadow. Nhưng bạn cũng có thể sử dụng border thực tế. Đôi khi, bạn cũng có thể sử dụng 2 hình chữ nhật khác nhau cho đường viền.

Giải pháp ở đây là phân tách màu nền và đường viền ở các cấp độ khác nhau, bởi vì xung quanh uốn cong, đường viền ngang thực sự cần phải trùng nhau thành hình vuông nghiêng. (Hoặc ngược lại, đường viền của hình vuông nghiêng cần chồng lên các đường viền ngang.)

Nhưng nhìn chung, tôi nghĩ rằng điều này trông giống như mũi tên hiệu quả năng lượng.

* { box-sizing: border-box; }

.efficiency {
  border: 1px solid black;
  /* Remove the following rules to support older browsers. */
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.bar {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-weight: 700;
  font-size: 1em;
  color: white;
  flex: 1;
  background: #3b7634;
  position: relative;
  z-index: 0;
  /*
  If you want to support older browsers:
  height: calc(100% / 7 - 3px);
  margin-bottom: 3px;
  */
}

.bar > .text {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 100%;
  width: 100%;
  border: 2px solid black;
  border-right: none;
  z-index: 1;
}

.a { width: 20%; background-color: #00A851 }
.b { width: 30%; background-color: #4FB947 }
.c { width: 40%; background-color: #C1D82D }
.d { width: 50%; background-color: #FEF200 }
.e { width: 60%; background-color: #FCBA0B }
.f { width: 70%; background-color: #F3711A }
.g { width: 80%; background-color: #EE141F }

.arrow {
  height: calc(100% / 1.41421356237); /* square root 2 */
  transform: translateX(-50%) rotate(45deg);
  position: absolute;
  left: 100%;
  user-select: none;
  background-color: inherit;
  box-shadow: inset -2px 2px black;
}

These look great


  
A
  
B
  
C
  
D
  
E
  
F
  
G



  
A
  
B
  
C
  
D
  
E
  
F
  
G


Just don't go extreme


  
A
  
B
  
C
  
D
  
E
  
F
  
G