Làm cách nào để thêm hình tam giác vào div trong css?

Tôi là một kỹ sư phần mềm với hơn sáu năm kinh nghiệm. Tôi đã làm việc với các ngăn xếp khác nhau, bao gồm WAMP, MERN và MEAN. Ngôn ngữ tôi chọn là JavaScript; . js

Có lẽ cách dễ nhất để thêm hình tam giác vào trang web là chỉ cần vẽ hình tam giác đó vào hình ảnh và thêm hình ảnh vào trang web. Có nhiều bí quyết để vẽ hình tam giác hoàn hảo và bạn có thể đọc cách thực hiện điều đó trong Photoshop trong bài viết này. Tạo hình tam giác trong Photoshop hoặc tải xuống gói hình tam giác miễn phí này cho Photoshop

Trong bài viết này tôi sẽ chỉ cho bạn cách tạo một hình tam giác bằng CSS & HTML

Dưới đây là tổng quan về các phương pháp khác nhau mà tôi sẽ sử dụng

• Tạo một hình tam giác bằng CSS

  .triangle-up {
      border-left: 20px solid transparent;
      border-right: 20px solid transparent;
      border-bottom: 20px solid green;
      border-top: 20px solid transparent;
      display: inline-block;
  }

  1
• Tạo một hình tam giác với các gradient CSS (______12 và

  .triangle-up {
      border-left: 20px solid transparent;
      border-right: 20px solid transparent;
      border-bottom: 20px solid green;
      border-top: 20px solid transparent;
      display: inline-block;
  }

  0)
• Tạo một hình tam giác bằng cách sử dụng

  .triangle-up {
      border-left: 20px solid transparent;
      border-right: 20px solid transparent;
      border-bottom: 20px solid green;
      border-top: 20px solid transparent;
      display: inline-block;
  }

  1 và

  .triangle-up {
      border-left: 20px solid transparent;
      border-right: 20px solid transparent;
      border-bottom: 20px solid green;
      border-top: 20px solid transparent;
      display: inline-block;
  }

  2
• Tạo hình tam giác bằng cách sử dụng 

  .triangle-up {
      border-left: 20px solid transparent;
      border-right: 20px solid transparent;
      border-bottom: 20px solid green;
      border-top: 20px solid transparent;
      display: inline-block;
  }

  3

Sử dụng .triangle-up { border-left: 20px solid transparent; border-right: 20px solid transparent; border-bottom: 20px solid green; border-top: 20px solid transparent; display: inline-block; }1 để tạo hình tam giác trong CSS

Nếu bạn đã tìm kiếm trên Internet cách tạo một tam giác CSS, thì có lẽ bạn đã thấy bài viết tuyệt vời này từ các thủ thuật CSS. Họ nhanh chóng giải thích cách tạo hình tam giác bằng thuộc tính CSS 

.triangle-up {
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 20px solid green;
    border-top: 20px solid transparent;
    display: inline-block;
}

1

Hãy để tôi nhanh chóng giải thích

Hãy xem xét đoạn mã HTML sau

.triangle-up {
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 20px solid green;
    border-top: 20px solid transparent;
    display: inline-block;
}

6

Và CSS

.triangle {
    border-left: 20px solid cyan;
    border-right: 20px solid red;
    border-bottom: 20px solid green;
    border-top: 20px solid blue;
    display: inline-block;
}

sẽ hiển thị như thế này

Đây là CSS

.triangle-element {
    width: 20px;
    height: 20px;
    overflow: hidden;
    position: relative;
    margin: 10px;
}
.triangle-element:after {
    content: '';
    background: green;
    width: 142%;
    height: 142%;
    position: absolute;
    transform: rotate(45deg) translate(-71%,0);
}

Cái nào sẽ hiển thị dưới dạng

Cách tạo một hình tam giác trong CSS bằng cách sử dụng .triangle-up { border-left: 20px solid transparent; border-right: 20px solid transparent; border-bottom: 20px solid green; border-top: 20px solid transparent; display: inline-block; }3

Và đây là một cách khác để tạo tam giác CSS. Chúng ta có thể sử dụng thuộc tính 

.triangle-up {
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 20px solid green;
    border-top: 20px solid transparent;
    display: inline-block;
}

3. Thuộc tính này hoạt động giống như clipping mask trong Photoshop. Về cơ bản, bạn chỉ có thể hiển thị các phần của phần tử HTML

.triangle-up {
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 20px solid green;
    border-top: 20px solid transparent;
    display: inline-block;
}

3 chấp nhận một số loại giá trị từ tham chiếu đến tệp SVG đến định nghĩa đa giác nội tuyến. Khi nói về đường dẫn clip SVG, tôi khuyên bạn nên đọc blog của Sara Soueidan vì cô ấy là một bậc thầy thực sự trong lĩnh vực đó, imho

Hãy xem cách nó hoạt động để tạo ra một hình tam giác

Đây là CSS

.triangle-up {
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 20px solid green;
    border-top: 20px solid transparent;
    display: inline-block;
}

0

Đó là?. ?

Đúng vậy đó là nó. Chúng tôi tạo tam giác bằng cách xác định nó là một đa giác có 3 góc. Đoạn mã này sẽ tạo ra một tam giác cân có đáy là 40 pixel và chiều cao là 40 pixel, các bạn dễ hình dung cách thay đổi

Tôi nghĩ rằng đây là phương pháp cho phép kiểm soát nhiều nhất

Sự kết luận

Có rất nhiều công dụng cho hình tam giác. Từ mũi tên đến ghim bản đồ, từ điểm đánh dấu menu đến thành phần biểu đồ

Bây giờ bạn đã biết cách tạo một hình tam giác bằng CSS

Nếu bạn thích hướng dẫn này, hãy nhớ xem Hướng dẫn cách thực hiện đầy đủ của chúng tôi để tạo và sử dụng Hình ảnh vòng tròn CSS hoặc xem cách tạo biểu đồ thanh chỉ CSS trong HTML