Hướng dẫn arrow in css - mũi tên trong css

Question

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

Nội dung chính Show

Cách tạo mũi tên
How To Create Arrows
1. Xây dựng giao diện
2. Thêm CSS cho giao diện
Công cụ tiêu chuẩn-tip
Công cụ cạnh phẳng-tip

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;
}

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);
}

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

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

.up {& nbsp; Biến đổi: ROTATE (-135DEG); & nbsp; & nbsp;

Learn how to create arrows with CSS.

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:

How To Create Arrows

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);
}

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);
}

.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


    Freetuts.net hướng dẫn tạo các dấu mũi tên
    Right arrow: 
    Left arrow: 
    Up arrow: 
    Down arrow:

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.

2. Thêm CSS cho giao diện

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:

.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);
}

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.

Thuật toán chúng ta sử dụng ở đây như sau:

Đầ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.
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.

Giờ các bạn chạy file index.html để xem thành quả mình vừa tạo ra nhé.

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.

Tham khảo thêm
doc CSS Animation CSS Animation CSS Animation
doc CSS Gradient CSS Gradient CSS Gradient
doc Transition trong CSS Transition trong CSS Transition trong CSS
doc Tooltip trong CSS Tooltip trong CSS Tooltip trong CSS
doc CSS Flexbox CSS Flexbox CSS Flexbox
doc Media Type trong CSS Media Type trong CSS Media Type trong CSS
doc 2D Transform trong CSS 2D Transform trong CSS 2D Transform trong CSS
doc 3D Transform trong CSS 3D Transform trong CSS 3D Transform trong CSS
doc User Interface trong CSS User Interface trong CSS User Interface trong CSS
doc Qui tắc @page trong CSS Qui tắc @page trong CSS 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.

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
}

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 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:30

Jitendra 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 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/

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/

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: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 :

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: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:05

Shahar 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 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: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:01

ZhianczhiancZhiancZhiancZhianc

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 badges

1

programming css Arrow animation CSS Animation arrow Box-shadow CSS CSS arrow Css arrow please Arrow box CSS Triangle CSS

Hướng dẫn arrow in css - mũi tên trong css

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

Bước 1) Thêm HTML:

Thí dụ

Bước 2) Thêm CSS:

Thí dụ

How To Create Arrows

Step 1) Add HTML:

Example

How To Create Arrows

Example

Mục lục nội dung

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

Freetuts.net hướng dẫn tạo các dấu mũi tên

2. Thêm CSS cho giao diện

Tham khảo thêm

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

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

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội