Hướng dẫn css line arrow - mũi tên dòng css

Question

Learn how to create arrows with CSS.

Nội dung chính Show

How To Create Arrows
Cách tạo mũi tên
Bước 2) Thêm CSS:
Bước 2) Thêm CSS: transform: rotate(-45deg); -webkit-transform: rotate(-45deg);}
Bước 2) Thêm CSS: transform: rotate(-45deg); -webkit-transform: rotate(-45deg);}
Step 1) Add HTML:
Step 2) Add CSS: transform: rotate(-45deg); -webkit-transform: rotate(-45deg);}
Công cụ tiêu chuẩn-tip
Công cụ cạnh phẳng-tip

Right arrow:

Left arrow:

Up arrow:

Down arrow:

How To Create Arrows

Step 1) Add HTML:

Example

Right arrow: Left arrow: Up arrow: Down arrow:

Left arrow:

Up arrow:

Down arrow:

Step 2) Add CSS:

Example

Right arrow: Left arrow: Up arrow: Down arrow:
border: solid black;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
}

Step 2) Add CSS:
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}

.arrow { border: solid black; border-width: 0 3px 3px 0; display: inline-block; padding: 3px;}
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
}

.right { transform: rotate(-45deg); -webkit-transform: rotate(-45deg);}
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
}

.left { transform: rotate(135deg); -webkit-transform: rotate(135deg);}
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}

.up { transform: rotate(-135deg); -webkit-transform: rotate(-135deg);}

Tìm hiểu cách tạo mũi tên với CSS.

Mũi tên bên phải:

Mũi tên trái:

Mũi tên lên:

Mũi tên xuống:

Cách tạo mũi tên

Bước 1) Thêm HTML:

Thí dụ

Mũi tên phải: Mũi tên trái: Mũi tên lên: Mũi tên xuống:

Left arrow:

Up arrow:

Down arrow:

Bước 2) Thêm CSS:

Thí dụ

Mũi tên phải: Mũi tên trái: Mũi tên lên: Mũi tên xuống:
border: solid black;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
}

Left arrow:
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}

Up arrow:
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
}

Down arrow:
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
}

Bước 2) Thêm CSS:
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}

Mũi tên phải: Mũi tên trái: Mũi tên lên: Mũi tên xuống: border: solid black; border-width: 0 3px 3px 0; display: inline-block; padding: 3px;}

Bước 2) Thêm CSS: transform: rotate(-45deg); -webkit-transform: rotate(-45deg);}

.arrow {& nbsp; Biên giới: Đen rắn; & nbsp; Độ rộng biên giới: 0 3px 3px 0; & nbsp; Hiển thị: Inline-Block; & nbsp; Đệm: 3px;} transform: rotate(135deg); -webkit-transform: rotate(135deg);}

Left arrow:

Up arrow:

Down arrow:

Bước 2) Thêm CSS:

Mũi tên phải: Mũi tên trái: Mũi tên lên: Mũi tên xuống: border: solid black; border-width: 0 3px 3px 0; display: inline-block; padding: 3px;}

Bước 2) Thêm CSS: transform: rotate(-45deg); -webkit-transform: rotate(-45deg);}

.arrow {& nbsp; Biên giới: Đen rắn; & nbsp; Độ rộng biên giới: 0 3px 3px 0; & nbsp; Hiển thị: Inline-Block; & nbsp; Đệm: 3px;} transform: rotate(135deg); -webkit-transform: rotate(135deg);}

Left arrow:

Up arrow:

Down arrow:

Bước 2) Thêm CSS:

Bước 2) Thêm CSS: transform: rotate(-45deg); -webkit-transform: rotate(-45deg);}

.arrow {& nbsp; Biên giới: Đen rắn; & nbsp; Độ rộng biên giới: 0 3px 3px 0; & nbsp; Hiển thị: Inline-Block; & nbsp; Đệm: 3px;} transform: rotate(135deg); -webkit-transform: rotate(135deg);}
border: solid black;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
}

.right {& nbsp; biến đổi: xoay (-45deg); & nbsp; -WebKit-Transform: ROTATE (-45DEG);} transform: rotate(-135deg); -webkit-transform: rotate(-135deg);}
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}

.left {& nbsp; Biến đổi: Xoay (135deg); & nbsp; & nbsp; transform: rotate(45deg); -webkit-transform: rotate(45deg);}
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
}

.up {& nbsp; Biến đổi: ROTATE (-135DEG); & nbsp; & nbsp;
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
}

Learn how to create arrows with CSS.
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}

Right arrow:

How To Create Arrows

Step 1) Add HTML:

Example

Right arrow: Left arrow: Up arrow: Down arrow:

<div class="container">
    <h2>Freetuts.net hướng dẫn tạo các dấu mũi tên</h2>
    <p>Right arrow: <i class="arrow right"></i></p>
    <p>Left arrow: <i class="arrow left"></i></p>
    <p>Up arrow: <i class="arrow up"></i></p>
    <p>Down arrow: <i class="arrow down"></i></p>
</div>

Right arrow: Left arrow: Up arrow: Down arrow: border: solid black; border-width: 0 3px 3px 0; display: inline-block; padding: 3px;}

Step 2) Add CSS: transform: rotate(-45deg); -webkit-transform: rotate(-45deg);}

Right arrow: Left arrow: Up arrow: Down arrow: border: solid black; border-width: 0 3px 3px 0; display: inline-block; padding: 3px;} transform: rotate(135deg); -webkit-transform: rotate(135deg);}

.container {
    width: 80%;
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
    margin: auto;
}
h2 {
    text-align: center;
}
i {
    border: solid black;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
}
p {
    width: 50%;
    margin: auto;
    text-align: center;
}
.right {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}

.left {
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
}

.up {
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
}

.down {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

.right { transform: rotate(-45deg); -webkit-transform: rotate(-45deg);} transform: rotate(-135deg); -webkit-transform: rotate(-135deg);} transform: rotate(-135deg); -webkit-transform: rotate(-135deg);}

.left { transform: rotate(135deg); -webkit-transform: rotate(135deg);} transform: rotate(45deg); -webkit-transform: rotate(45deg);} transform: rotate(45deg); -webkit-transform: rotate(45deg);}

.up { transform: rotate(-135deg); -webkit-transform: rotate(-135deg);}
Mục lục nội dung

1. Xây dựng giao diện

Đầu tiên chúng ta sẽ xây dựng các thành phần, các bạn tạo file index.html và dán đoạn mã sau vào trong thẻ body:

Code
Các thành phần này đều rất đơn giản, chúng ta sẽ tạo các thẻ i để hiện thị các dấu mũi tên. CSS Animation
2. Thêm CSS cho giao diện CSS Gradient
Chúng ta đã có thành phần hiển thị rồi giờ sử dụng CSS để định dạng cho chúng, các bạn đặt đoạn CSS dưới đây vào bên trong thẻ style: Transition trong CSS
Các đoạn mã trên đều rất cơ bản, các bạn có thể tuỳ chỉnh theo ý thích sao cho phù hợp nhất với website của mình. Tooltip trong CSS
Thuật toán chúng ta sử dụng ở đây như sau: CSS Flexbox
Đầu tiên là tạo border cho thẻ i, tuy nhiên chỉ tạo 2 cạnh của border, sau khi tạo ta sẽ được một icon là 2 cạnh của hình vuông. Media Type trong CSS
Tiếp đến, ta sẽ sử dụng thuộc tính transform để xoay icon trên thành các dấu phù hợp. 2D Transform trong CSS
Giờ các bạn chạy file index.html để xem thành quả mình vừa tạo ra nhé. 3D Transform trong CSS
Trên đây là bài viết của eLib.VN về CSS Arrow. Như vậy, qua bài viết này eLib đã cùng các bạn tạo các dấu mũi tên với CSS. Hi vọng nó sẽ giúp các có thêm sự lựa chọn trong quá trình xây dựng website. User Interface trong CSS
Tham khảo thêm Qui tắc @page trong CSS

37

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.Learn more.Learn more.
Learn more.

Làm thế nào để tạo một hộp có mũi tên trong CSS?

Làm góc tròn là dễ dàng. Nhưng bất kỳ ý tưởng để làm cho mũi tên ở bên trái mà không sử dụng hình ảnh.

Có thể làm cho có thể với

Chỉ một yếu tố

.container {
    width: 80%;
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
    margin: auto;
}
h2 {
    text-align: center;
}
i {
    border: solid black;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
}
p {
    width: 50%;
    margin: auto;
    text-align: center;
}
.right {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}

.left {
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
}

.up {
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
}

.down {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

9

body {
  background: #ff004e;
  padding: 40px
}
p {
  background: white;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  width: 250px;
  height: 150px
}

<p></p>

Stewartside

19.7K12 Huy hiệu vàng62 Huy hiệu bạc76 Huy hiệu đồng12 gold badges62 silver badges76 bronze badges12 gold badges62 silver badges76 bronze badges12 gold badges62 silver badges76 bronze badges12 gold badges62 silver badges76 bronze badges

Hỏi ngày 7 tháng 8 năm 2011 lúc 10:30Aug 7, 2011 at 10:30Aug 7, 2011 at 10:30Aug 7, 2011 at 10:30Aug 7, 2011 at 10:30

Jitendra Vyasjitendra VyasJitendra VyasJitendra VyasJitendra VyasJitendra Vyas

Badges vàng 144K225563 Huy hiệu bạc841 Huy hiệu đồng225 gold badges563 silver badges841 bronze badges225 gold badges563 silver badges841 bronze badges225 gold badges563 silver badges841 bronze badges225 gold badges563 silver badges841 bronze badges

3

Như thế này :

.arrow {
    border: solid 10px transparent;
    border-right-color: #FFF;
}

Bản demo: http://jsfiddle.net/sparkup/edjdxjf2/ http://jsfiddle.net/sparkup/edjdxjf2/ http://jsfiddle.net/sparkup/edjdxjf2/ http://jsfiddle.net/sparkup/edjdxjf2/ http://jsfiddle.net/sparkup/edjdxjf2/

CẬP NHẬT :

Nó cũng có thể đạt được mà không cần các phần tử trống với thuộc tính CSS

body {
  background: #ff004e;
  padding: 40px
}
p {
  background: white;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  width: 250px;
  height: 150px
}

0

element:before {
    content: "";
    position: absolute;
    top: 50%;                         // half way down (vertical center).
    margin-top: -15px;                // adjust position, arrow has a height of 30px. 
    left:-30px;
    border: solid 15px transparent;
    border-right-color: #FFF;
    z-index: 1;
}

Bản demo: http://jsfiddle.net/sparkup/y89f1te0/ : http://jsfiddle.net/sparkup/y89f1te0/ : http://jsfiddle.net/sparkup/y89f1te0/ : http://jsfiddle.net/sparkup/y89f1te0/ : http://jsfiddle.net/sparkup/y89f1te0/

hy vọng nó giúp

Đã trả lời ngày 7 tháng 8 năm 2011 lúc 10:37Aug 7, 2011 at 10:37Aug 7, 2011 at 10:37Aug 7, 2011 at 10:37Aug 7, 2011 at 10:37

5

Công cụ tiêu chuẩn-tip

Nếu bạn muốn một mũi tên đơn giản, thì bạn có thể thêm phần tử giả với

body {
  background: #ff004e;
  padding: 40px
}
p {
  background: white;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  width: 250px;
  height: 150px
}

1.

Fiddle 1

Công cụ cạnh phẳng-tip

Nếu bạn muốn một cạnh phẳng cho mũi tên, hãy thử điều này:flat edge for arrow, try this :flat edge for arrow, try this :flat edge for arrow, try this :flat edge for arrow, try this :

Fiddle 2

Đã trả lời ngày 22 tháng 2 năm 2015 lúc 9:24Feb 22, 2015 at 9:24Feb 22, 2015 at 9:24Feb 22, 2015 at 9:24Feb 22, 2015 at 9:24

Câu trả lời của tôi (không có cạnh phẳng), thêm một số công thức tính toán:

.mainBox {
    border: solid 1px #e0e0e0;        
}

.mainBox:before {
    content:"";
    position: absolute;
    /*The right value must be calculated with: (top value of after) - (top value of before) = (right value of before) */
    /*example: (-4px) - (-7px) = 3px*/
    right: 72px; 
    /*The `top` value must be identical to border-width*/
    top: -7px; 
    width: 0;
    height: 0;
    border-style: solid;
    /*The `border-width` value must be identical to top*/
    border-width: 0 7px 7px 7px;
    /*The border color 3rd (#e0e0e0) value must be identical to its parent border color*/
    border-color: transparent transparent #e0e0e0 transparent;
    /*The (z-index of before) must at least one below the (z-index of after)*/
    /*Example: (z-index of before) < (z-index of after) or 9998 < 9999*/
    z-index:9998;
}

.mainBox:after {
    content:"";
    position: absolute;
    right: 75px;
    top: -4px; /*suppose to be identical to border-width*/
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 4px 4px 4px;
    border-color: transparent transparent #fff transparent; 
    z-index:9999;
}

Các quy tắc cơ bản là:

Giá trị bên phải trước phải được tính bằng: (________ 10

1) - (________ 12's

1) = (________ 12's

5)

Ví dụ: (-4px)-(-7px) = 3px

Giá trị

1 của

2 và ____ 10 phải giống hệt với

9.
Giá trị màu thứ 3 (#E0E0E0 trong ví dụ) phải giống hệt với màu đường viền cha mẹ của nó.
________ 12 của
.arrow {
 border: solid 10px transparent;
 border-right-color: #FFF;
}
1 phải ít nhất một bên dưới ____ 10
.arrow {
 border: solid 10px transparent;
 border-right-color: #FFF;
}
1.

Ví dụ: (________ 12's

.arrow {
    border: solid 10px transparent;
    border-right-color: #FFF;
}

1)

Kết quả:

Đã trả lời ngày 14 tháng 1 năm 2018 lúc 18:05Jan 14, 2018 at 18:05Jan 14, 2018 at 18:05Jan 14, 2018 at 18:05Jan 14, 2018 at 18:05

Shahar Shokranishahar ShokraniShahar ShokraniShahar ShokraniShahar ShokraniShahar Shokrani

6.6068 Huy hiệu vàng43 Huy hiệu bạc73 Huy hiệu đồng8 gold badges43 silver badges73 bronze badges8 gold badges43 silver badges73 bronze badges8 gold badges43 silver badges73 bronze badges8 gold badges43 silver badges73 bronze badges

.container {
    width: 80%;
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
    margin: auto;
}
h2 {
    text-align: center;
}
i {
    border: solid black;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
}
p {
    width: 50%;
    margin: auto;
    text-align: center;
}
.right {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}

.left {
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
}

.up {
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
}

.down {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

7

Mã trên có thể được sử dụng cho mũi tên phải.

Đã trả lời ngày 4 tháng 10 năm 2013 lúc 10:15Oct 4, 2013 at 10:15Oct 4, 2013 at 10:15Oct 4, 2013 at 10:15Oct 4, 2013 at 10:15

Bạn có thể sử dụng nhịp nếu bạn không muốn sử dụng một div.

.container {
    width: 80%;
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
    margin: auto;
}
h2 {
    text-align: center;
}
i {
    border: solid black;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
}
p {
    width: 50%;
    margin: auto;
    text-align: center;
}
.right {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}

.left {
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
}

.up {
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
}

.down {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

8

http://jsfiddle.net/SSKwn/

Đã trả lời ngày 7 tháng 8 năm 2011 lúc 11:01Aug 7, 2011 at 11:01Aug 7, 2011 at 11:01Aug 7, 2011 at 11:01Aug 7, 2011 at 11:01

ZhianczhiancZhiancZhiancZhiancZhianc

1.3813 huy hiệu vàng19 Huy hiệu bạc37 Huy hiệu đồng3 gold badges19 silver badges37 bronze badges3 gold badges19 silver badges37 bronze badges3 gold badges19 silver badges37 bronze badges3 gold badges19 silver badges37 bronze badges

1