Hướng dẫn box with arrow css - hộp có mũi tên 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.

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ố

....

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 badges

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

Jitendra Vyasjitendra VyasJitendra Vyas

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

3

Như thế này :

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

Bản demo: //jsfiddle.net/sparkup/edjdxjf2/ //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 :before

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: //jsfiddle.net/sparkup/y89f1te0/ : //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: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 border-right.

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 :

Fiddle 2

Đã trả lời ngày 22 tháng 2 năm 2015 lúc 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à:

1. 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

1. Giá trị

   1 của
   2 và ____ 10 phải giống hệt với
   9.

2. 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ó.

3. ________ 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;
}