CSS thêm hình tam giác vào đầu div

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
Dấu ngoặc nhọn (< hoặc >), còn được gọi là “dấu bất đẳng thức” để sử dụng trong toán học, là một loại dấu mũ nghiêng có thể được sử dụng để bao gồm các thẻ hoặc đoạn mã. Bộ ký tự ASCII này phổ biến trong thiết kế web và các loại dự án mã hóa khác

Bạn đã bao giờ tự hỏi làm thế nào để tạo một hình tam giác chỉ bằng cách sử dụng css và HTML chưa?

Hãy tạo một div 100 x 100 và làm cho nó có màu đen. Sau đó thử thêm 4 màu khác nhau vào các đường viền như xanh lá cây, vàng, đỏ, tím

CSS thêm hình tam giác vào đầu div

Bây giờ bạn có thể thấy một hình vuông có 4 đường viền. Kiểm tra hình dạng của đường viền. Nó giống như một góc trong cả hai góc. Sau đó, chúng ta có thể đặt chiều rộng và chiều cao bằng 0 để chỉ giữ lại các đường viền. Và loại bỏ màu nền. Bây giờ bạn có thể thấy một hình vuông nhỏ với 4 hình tam giác phải không?

 .triangle{
            width:0px;
            height:0px;
            background:black;
            border:20px solid;
            border-top-color: red;
            border-left-color: green;
            border-right-color: blue;
            border-bottom-color: purple;
        }
  <div class="triangle">div>

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

CSS thêm hình tam giác vào đầu div

Bây giờ bạn chỉ cần thay đổi màu sắc thành trong suốt và chỉ giữ lại hình dạng cần thiết

tam giác vuông

giữ màu của đường viền bên trái và làm trong suốt khác

       .triangle-right{
            width:0px;
            height:0px;
            border:10px solid;
            border-top-color: transparent;
            border-left-color: green;
            border-right-color: transparent;
            border-bottom-color: transparent;
        }
        <div class="triangle-right">div>

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

đỉnh tam giác

giữ màu của viền dưới và làm trong suốt khác

      .triangle-top{
            width:0px;
            height:0px;
            border:10px solid;
            border-top-color: transparent;
            border-left-color: transparent;
            border-right-color: transparent;
            border-bottom-color: purple;
        }
        <div class="triangle-top">div>

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

tam giác trái

giữ màu của đường viền bên phải và làm trong suốt khác

       .triangle-left{
                width:0px;
                height:0px;
                border:10px solid;
                border-top-color: transparent;
                border-left-color: transparent;
                border-right-color: blue;
                border-bottom-color: transparent;
        }
        <div class="triangle-left">div>

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

tam giác đáy

giữ màu của đường viền trên cùng và làm trong suốt khác

        .triangle-bottom{
            width:0px;
            height:0px;
            border:10px solid;
            border-top-color: red;
            border-left-color: transparent;
            border-right-color: transparent;
            border-bottom-color: transparent;
        }
        <div class="triangle-bottom">div>

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

 

Tăng kích thước của hình tam giác

Bằng cách thay đổi kích thước đường viền, bạn có thể tăng kích thước của hình tam giác

      .triangle-right{
            width:0px;
            height:0px;
            border:20px solid;
            border-top-color: transparent;
            border-left-color: green;
            border-right-color: transparent;
            border-bottom-color: transparent;
        }
        <div class="triangle-right">div>

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

 

Xoay hình tam giác

Bạn có thể sử dụng thuộc tính biến đổi đặt xoay khi bạn cần

        .triangle-rotate{
            width:0px;
            height:0px;
            border:10px solid;
            border-top-color: transparent;
            border-left-color: transparent;
            border-right-color: transparent;
            border-bottom-color: purple;
            transform: rotate(20deg);
        }
        <div class="triangle-rotate">div>

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

 

Thêm một hình tam giác vào cuối div

Việc thêm hình tam giác vào cuối div đôi khi có vẻ khó hiểu. Bạn có thể dùng. sau bộ chọn để thêm kiểu vào cuối div. Khi thêm mũi tên vào dưới cùng, chúng ta cần giữ đường viền trên cùng và làm cho các đường viền khác trong suốt. Trong div này, chiều rộng đã được đặt là 100px. Sau đó, đường viền bên trái và bên phải phải bằng một nửa kích thước của div. Ngoài ra, bằng cách thay đổi chiều cao đường viền trên cùng, bạn có thể thay đổi chiều cao của hình tam giác

        .triangle-after{
            width: 100px;
            height: 50px;
            background: black;
            position: relative;
        }

        .triangle-after:after{
            content: "";
            position: absolute;
            width:0;
            height:0;
            top: 100%;
            border-top: solid 10px #e15915;
            border-left: solid 50px transparent;
            border-right: solid 50px transparent;
            border-bottom: solid 10px transparent;
        }
        <div class="triangle-after">div>

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Được xuất bản lần đầu tại Mightytechno

Kết nối với tôi - Instagram. Blog. YouTube