HTML5 & CSS3

Vẽ tam giác bằng CSS

Chia sẻ nhanh

Trong hướng dẫn này, tôi sẽ hướng dẫn các bạn cách vẽ hình tam giác bằng css thuần túy, hem động vào bất kì tí nào về image nhé.

HTML

Bạn có thể tùy biến class nhé. Ở đây tôi vẽ ra 4 tam giác quay 4 hướng luôn cho các bạn dễ hình dung

<div class="arrow-up"></div>

<div class="arrow-down"></div>

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

<div class="arrow-right"></div>

 

CSS

.arrow-up {
  width: 0; 
  height: 0; 
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  
  border-bottom: 5px solid black;
}

.arrow-down {
  width: 0; 
  height: 0; 
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  
  border-top: 20px solid #f00;
}

.arrow-right {
  width: 0; 
  height: 0; 
  border-top: 60px solid transparent;
  border-bottom: 60px solid transparent;
  
  border-left: 60px solid green;
}

.arrow-left {
  width: 0; 
  height: 0; 
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent; 
  
  border-right:10px solid blue; 
}

Kết quả

 




Bình luận

TOP

Bạn đã sẵn sàng chuyển ý tưởng tuyệt vời
của bạn thành hiện thực?