Hướng dẫn how do you put a border around a triangle in css? - làm thế nào để bạn đặt một đường viền xung quanh một hình tam giác trong css?

Question

Để thêm một đường viền vào một tam giác được tạo ra thông qua các đường viền hoặc thuộc tính clip-path, bạn chỉ cần phủ một hình tam giác nhỏ hơn một chút tạo ra ảo ảnh của đường viền.overlay a slightly smaller triangle that gives the illusion 🧙‍♀️ of a border.

Nội dung chính Show

Làm cách nào để tạo hình dạng đường viền trong CSS?
Làm thế nào để bạn tạo một hình tam giác với bán kính biên giới trong CSS?
Bạn có thể thêm biên giới trong CSS không?
Làm cách nào để thêm một mũi tên biên giới trong CSS?

Lấy hình tam giác màu đen này dưới đây làm ví dụ.

.triangle {
  width: 0;
  height: 0;
  border-bottom: solid 50px transparent;
  border-top: solid 50px black;
  border-left: solid 50px transparent;
  border-right: solid 50px transparent;
}

Tam giác đen

Cách đơn giản nhất để phủ lên một tam giác khác là định vị tuyệt đối nó như một yếu tố giả. Đầu tiên, đặt tam giác mẹ thành một vị trí tương đối.pseudo-element. First, set the parent triangle to a relative position.

.triangle {
  width: 0;
  height: 0;
+ position: relative;
  ...
}

Tiếp theo, cạo một số pixel từ tam giác lớp phủ và cố gắng định vị nó bên trong cha mẹ. Không có công thức ma thuật, chỉ là một số thử nghiệm và lỗi tốt.trial and error.

.triangle:before {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  border-bottom: solid 48px transparent;
  border-top: solid 48px white;
  border-left: solid 48px transparent;
  border-right: solid 48px transparent;
  top: -49px;
  left: -48px;
}

Tam giác lớp màu trắng

28

Mới! Lưu câu hỏi hoặc câu trả lời và sắp xếp nội dung yêu thích của bạn. Tìm hiểu thêm.
Learn more.

Tôi có một tam giác

<div class="triangle-left"></div>


.triangle-left {
    width: 0; 
    height: 0; 
    border-top: 22px solid transparent;
    border-bottom: 22px solid transparent;
    border-right: 22px solid white;
}

Làm thế nào để tôi vẽ đường viền của một tam giác CSS, xem xét chính border được sử dụng để tạo hình tam giác? Divs bên ngoài?

web-tiki

94.6K31 Huy hiệu vàng211 Huy hiệu bạc244 Huy hiệu đồng31 gold badges211 silver badges244 bronze badges

Đã hỏi ngày 12 tháng 3 năm 2015 lúc 3:59Mar 12, 2015 at 3:59

2

Một cách để làm điều đó là tạo một tam giác bên trong nhỏ hơn.

.triangle-left {
    width: 0;
    height: 0;
    border-top: 23px solid transparent;
    border-bottom: 23px solid transparent;
    border-right: 23px solid red;
}

.inner-triangle {
    position: relative;
    top: -20px;
    left: 2px;
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-right: 20px solid blue;
}

<div class="triangle-left">
    <div class="inner-triangle"></div>
</div>

Đã trả lời ngày 12 tháng 3 năm 2015 lúc 4:08Mar 12, 2015 at 4:08

RsquaredrsquaredRSquared

1.1489 huy hiệu bạc19 huy hiệu đồng9 silver badges19 bronze badges

Đây là cách tôi sẽ làm điều đó.

.triangle-left {
  width: 0;
  height: 0;
  border-top: 22px solid transparent;
  border-bottom: 22px solid transparent;
  border-right: 22px solid black;
  position: relative;
}

.triangle-left:after {
  content: '';
  width: 0;
  height: 0;
  border-top: 21px solid transparent;
  border-bottom: 21px solid transparent;
  border-right: 21px solid #dddddd;
  position: absolute;
  top: -21px;
  left: 1px;
}