Hướng dẫn how do you add a price tag in html? - làm thế nào để bạn thêm một thẻ giá trong html?

$ 49,99 / năm

25 miền

Băng thông 2GB
  box-sizing: border-box;
}

$ 49,99 / năm
.columns {
  float: left;
  width: 33.3%;
  padding: 8px;
}

Kho lưu trữ 50 GB
.price {
  list-style-type: none;
  border: 1px solid #eee;
  margin: 0;
  padding: 0;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

50 email
.price:hover {
  box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)
}

50 miền
.price .header {
  background-color: #111;
  color: white;
  font-size: 25px;
}

Băng thông 5GB
.price li {
  border-bottom: 1px solid #eee;
  padding: 20px;
  text-align: center;
}

Hãy tự mình thử »
.price .grey {
  background-color: #eee;
  font-size: 20px;
}

Cách tạo bảng định giá đáp ứng
.button {
  background-color: #04AA6D;
  border: none;
  color: white;
  padding: 10px 25px;
  text-align: center;
  text-decoration: none;
  font-size: 18px;
}

Bước 1) Thêm HTML:
(to stack horizontally on small screens) */
@media only screen and (max-width: 600px) {
  .columns {
    width: 100%;
  }
}

$ 24,99 / năm

Vì vậy, tôi đã tìm thấy câu trả lời này - hình dạng menu CSS3, kiểu nhưng không biết cách đặt nó ở phía bên trái. Tôi đã tìm kiếm nó rồi nhưng không có may mắn.

Đây là những gì tôi đang cố gắng đạt được:

Và tôi cũng đã tìm thấy cái này - thay đổi hình dạng của tam giác. Làm thế nào tôi có thể làm cho nó hoạt động ở phía đối diện? Ý tôi là mũi tên cần phải ở phía bên trái. Và có thể làm điều này với một

.pricetag{
    white-space:nowrap;
    position:relative;
    margin:0 5px 0 10px;
    displaY:inline-block;
    height:25px;
    border-radius: 0 5px 5px 0;
    padding: 0 25px 0 15px;
    background:#E8EDF0;
    border: 0 solid #C7D2D4;
    border-top-width:1px;
    border-bottom-width:1px;
    color:#999;
    line-height:23px;
}
.pricetag:after{
    position:absolute;
    right:0;
    margin:1px 7px;
    font-weight:bold;
    font-size:19px;
    content:"\00D7";
}
.pricetag:before{
    position:absolute;
    content:"\25CF";
    color:white;
    text-shadow: 0 0 1px #333;
    font-size:11px;
    line-height:0px;
    text-indent:12px;
    left:-15px;
    width: 1px;
    height:0px;
    border-right:14px solid #E8EDF0;
    border-top:  13px solid transparent;
    border-bottom:  13px solid transparent;
}

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

5

Muốn một cái mà bạn có thể đặt trên bất kỳ màu nền?

Demo JSBIN

Chỉ HTML này:

Và CSS này:

.pricetag{
    white-space:nowrap;
    position:relative;
    margin:0 5px 0 10px;
    displaY:inline-block;
    height:25px;
    border-radius: 0 5px 5px 0;
    padding: 0 25px 0 15px;
    background:#E8EDF0;
    border: 0 solid #C7D2D4;
    border-top-width:1px;
    border-bottom-width:1px;
    color:#999;
    line-height:23px;
}
.pricetag:after{
    position:absolute;
    right:0;
    margin:1px 7px;
    font-weight:bold;
    font-size:19px;
    content:"\00D7";
}
.pricetag:before{
    position:absolute;
    content:"\25CF";
    color:white;
    text-shadow: 0 0 1px #333;
    font-size:11px;
    line-height:0px;
    text-indent:12px;
    left:-15px;
    width: 1px;
    height:0px;
    border-right:14px solid #E8EDF0;
    border-top:  13px solid transparent;
    border-bottom:  13px solid transparent;
}

về cơ bản tuân theo các nguyên tắc này: làm thế nào để tạo hình dạng ruy băng trong CSS

Nếu bạn muốn thêm biên giới xung quanh:

Bản demo JSBIN với Biến đổi:

.pricetag{
    white-space:nowrap;
    position:relative;
    margin:0 5px 0 10px;
    displaY:inline-block;
    height:25px;
    border-radius: 0 5px 5px 0;
    padding: 0 25px 0 15px;
    background:#E8EDF0;
    border: 0 solid #C7D2D4;
    border-top-width:1px;
    border-bottom-width:1px;
    color:#999;
    line-height:23px;
}
.pricetag:after{
    position:absolute;
    right:0;
    margin:1px 7px;
    font-weight:bold;
    font-size:19px;
    content:"\00D7";
}
.pricetag:before{
    position:absolute;
    content:"\25CF";
    color:white;
    text-shadow: 0 0 1px #333;
    font-size:11px;
    line-height:0px;
    text-indent:12px;
    left:-15px;
    width: 1px;
    height:0px;
    border-right:14px solid #E8EDF0;
    border-top:  13px solid transparent;
    border-bottom:  13px solid transparent;
}

.pricetag{
    white-space:nowrap;
    position:relative;
    margin:0 5px 0 10px;
    displaY:inline-block;
    height:25px;
    border-radius: 0 5px 5px 0;
    padding: 0 25px 0 15px;
    background:#E8EDF0;
    border: 0 solid #C7D2D4;
    border-top-width:1px;
    border-bottom-width:1px;
    color:#999;
    line-height:23px;
}
.pricetag:after{
    position:absolute;
    right:0;
    margin:1px 7px;
    font-weight:bold;
    font-size:19px;
    content:"\00D7";
}
.pricetag:before{
    position:absolute;
    content:"\25CF";
    color:white;
    text-shadow: 0 0 1px #333;
    font-size:11px;
    line-height:0px;
    text-indent:12px;
    left:-15px;
    width: 1px;
    height:0px;
    border-right:14px solid #E8EDF0;
    border-top:  13px solid transparent;
    border-bottom:  13px solid transparent;
}

.pricetag{
    white-space:nowrap;
    position:relative;
    margin:0 5px 0 10px;
    displaY:inline-block;
    height:25px;
    border-radius: 0 5px 5px 0;
    padding: 0 25px 0 15px;
    background:#E8EDF0;
    border: 1px solid #C7D2D4;
    color:#999;
    line-height:23px;
}
.pricetag:after{
    position:absolute;
    right:0;
    margin:1px 7px;
    font-weight:bold;
    font-size:19px;
    content:"\00D7";
}
.pricetag:before{
    position:absolute;
    background:#E8EDF0;
    content:"\25CF";
    color:white;
    text-shadow: 0 0 1px #aaa;
    font-size:12px;
    line-height:13px;
    text-indent:6px;
    top:3px;
    left:-10px;
    width: 18px;
    height: 18px;
    transform: rotate(45deg);
    border-left:1px solid #C7D2D4;
    border-bottom:1px solid #C7D2D4;
}

Đã trả lời ngày 8 tháng 8 năm 2014 lúc 3:45Aug 8, 2014 at 3:45

Roko C. Buljanroko C. BuljanRoko C. Buljan

185K37 Huy hiệu vàng294 Huy hiệu bạc299 Huy hiệu đồng37 gold badges294 silver badges299 bronze badges

15

Vì hình ảnh ví dụ trong câu hỏi có thêm đường viền bên ngoài, việc đạt được nó với thủ thuật biên giới sẽ liên quan đến nhiều phần tử (giả) và sẽ trở nên phức tạp (vì ngoài hình dạng mũi tên, một vòng tròn cũng cần thiết ở phía trước). Thay vào đó, điều tương tự có thể đạt được bằng cách sử dụng

.pricetag{
    white-space:nowrap;
    position:relative;
    margin:0 5px 0 10px;
    displaY:inline-block;
    height:25px;
    border-radius: 0 5px 5px 0;
    padding: 0 25px 0 15px;
    background:#E8EDF0;
    border: 0 solid #C7D2D4;
    border-top-width:1px;
    border-bottom-width:1px;
    color:#999;
    line-height:23px;
}
.pricetag:after{
    position:absolute;
    right:0;
    margin:1px 7px;
    font-weight:bold;
    font-size:19px;
    content:"\00D7";
}
.pricetag:before{
    position:absolute;
    content:"\25CF";
    color:white;
    text-shadow: 0 0 1px #333;
    font-size:11px;
    line-height:0px;
    text-indent:12px;
    left:-15px;
    width: 1px;
    height:0px;
    border-right:14px solid #E8EDF0;
    border-top:  13px solid transparent;
    border-bottom:  13px solid transparent;
}

Cách tiếp cận khá đơn giản và như sau:

• Container phụ huynh

  .pricetag{
      white-space:nowrap;
      position:relative;
      margin:0 5px 0 10px;
      displaY:inline-block;
      height:25px;
      border-radius: 0 5px 5px 0;
      padding: 0 25px 0 15px;
      background:#E8EDF0;
      border: 0 solid #C7D2D4;
      border-top-width:1px;
      border-bottom-width:1px;
      color:#999;
      line-height:23px;
  }
  .pricetag:after{
      position:absolute;
      right:0;
      margin:1px 7px;
      font-weight:bold;
      font-size:19px;
      content:"\00D7";
  }
  .pricetag:before{
      position:absolute;
      content:"\25CF";
      color:white;
      text-shadow: 0 0 1px #333;
      font-size:11px;
      line-height:0px;
      text-indent:12px;
      left:-15px;
      width: 1px;
      height:0px;
      border-right:14px solid #E8EDF0;
      border-top:  13px solid transparent;
      border-bottom:  13px solid transparent;
  }
  

  2 chứa văn bản nên có trong hình dạng thẻ giá.
• Phần tử giả

  .pricetag{
      white-space:nowrap;
      position:relative;
      margin:0 5px 0 10px;
      displaY:inline-block;
      height:25px;
      border-radius: 0 5px 5px 0;
      padding: 0 25px 0 15px;
      background:#E8EDF0;
      border: 0 solid #C7D2D4;
      border-top-width:1px;
      border-bottom-width:1px;
      color:#999;
      line-height:23px;
  }
  .pricetag:after{
      position:absolute;
      right:0;
      margin:1px 7px;
      font-weight:bold;
      font-size:19px;
      content:"\00D7";
  }
  .pricetag:before{
      position:absolute;
      content:"\25CF";
      color:white;
      text-shadow: 0 0 1px #333;
      font-size:11px;
      line-height:0px;
      text-indent:12px;
      left:-15px;
      width: 1px;
      height:0px;
      border-right:14px solid #E8EDF0;
      border-top:  13px solid transparent;
      border-bottom:  13px solid transparent;
  }
  

  7 có

  .pricetag{
      white-space:nowrap;
      position:relative;
      margin:0 5px 0 10px;
      displaY:inline-block;
      height:25px;
      border-radius: 0 5px 5px 0;
      padding: 0 25px 0 15px;
      background:#E8EDF0;
      border: 0 solid #C7D2D4;
      border-top-width:1px;
      border-bottom-width:1px;
      color:#999;
      line-height:23px;
  }
  .pricetag:after{
      position:absolute;
      right:0;
      margin:1px 7px;
      font-weight:bold;
      font-size:19px;
      content:"\00D7";
  }
  .pricetag:before{
      position:absolute;
      content:"\25CF";
      color:white;
      text-shadow: 0 0 1px #333;
      font-size:11px;
      line-height:0px;
      text-indent:12px;
      left:-15px;
      width: 1px;
      height:0px;
      border-right:14px solid #E8EDF0;
      border-top:  13px solid transparent;
      border-bottom:  13px solid transparent;
  }
  

  8 và tạo ra hình dạng tam giác. Điều này sau đó được định vị hoàn toàn đối với cạnh trái của cha mẹ.

  .pricetag{
      white-space:nowrap;
      position:relative;
      margin:0 5px 0 10px;
      displaY:inline-block;
      height:25px;
      border-radius: 0 5px 5px 0;
      padding: 0 25px 0 15px;
      background:#E8EDF0;
      border: 0 solid #C7D2D4;
      border-top-width:1px;
      border-bottom-width:1px;
      color:#999;
      line-height:23px;
  }
  .pricetag:after{
      position:absolute;
      right:0;
      margin:1px 7px;
      font-weight:bold;
      font-size:19px;
      content:"\00D7";
  }
  .pricetag:before{
      position:absolute;
      content:"\25CF";
      color:white;
      text-shadow: 0 0 1px #333;
      font-size:11px;
      line-height:0px;
      text-indent:12px;
      left:-15px;
      width: 1px;
      height:0px;
      border-right:14px solid #E8EDF0;
      border-top:  13px solid transparent;
      border-bottom:  13px solid transparent;
  }
  

  9 được đặt trên phần tử giả ngăn không cho đường viền bên trái của container cha mẹ được nhìn thấy.
• Phần tử giả

  .pricetag{
      white-space:nowrap;
      position:relative;
      margin:0 5px 0 10px;
      displaY:inline-block;
      height:25px;
      border-radius: 0 5px 5px 0;
      padding: 0 25px 0 15px;
      background:#E8EDF0;
      border: 0 solid #C7D2D4;
      border-top-width:1px;
      border-bottom-width:1px;
      color:#999;
      line-height:23px;
  }
  .pricetag:after{
      position:absolute;
      right:0;
      margin:1px 7px;
      font-weight:bold;
      font-size:19px;
      content:"\00D7";
  }
  .pricetag:before{
      position:absolute;
      content:"\25CF";
      color:white;
      text-shadow: 0 0 1px #333;
      font-size:11px;
      line-height:0px;
      text-indent:12px;
      left:-15px;
      width: 1px;
      height:0px;
      border-right:14px solid #E8EDF0;
      border-top:  13px solid transparent;
      border-bottom:  13px solid transparent;
  }
  

  4 tạo thành vòng tròn có mặt ở phía bên trái (sử dụng

  .pricetag{
      white-space:nowrap;
      position:relative;
      margin:0 5px 0 10px;
      displaY:inline-block;
      height:25px;
      border-radius: 0 5px 5px 0;
      padding: 0 25px 0 15px;
      background:#E8EDF0;
      border: 1px solid #C7D2D4;
      color:#999;
      line-height:23px;
  }
  .pricetag:after{
      position:absolute;
      right:0;
      margin:1px 7px;
      font-weight:bold;
      font-size:19px;
      content:"\00D7";
  }
  .pricetag:before{
      position:absolute;
      background:#E8EDF0;
      content:"\25CF";
      color:white;
      text-shadow: 0 0 1px #aaa;
      font-size:12px;
      line-height:13px;
      text-indent:6px;
      top:3px;
      left:-10px;
      width: 18px;
      height: 18px;
      transform: rotate(45deg);
      border-left:1px solid #C7D2D4;
      border-bottom:1px solid #C7D2D4;
  }
  

  1).
• Dấu X ở cuối được thêm vào bằng thẻ

  .pricetag{
      white-space:nowrap;
      position:relative;
      margin:0 5px 0 10px;
      displaY:inline-block;
      height:25px;
      border-radius: 0 5px 5px 0;
      padding: 0 25px 0 15px;
      background:#E8EDF0;
      border: 1px solid #C7D2D4;
      color:#999;
      line-height:23px;
  }
  .pricetag:after{
      position:absolute;
      right:0;
      margin:1px 7px;
      font-weight:bold;
      font-size:19px;
      content:"\00D7";
  }
  .pricetag:before{
      position:absolute;
      background:#E8EDF0;
      content:"\25CF";
      color:white;
      text-shadow: 0 0 1px #aaa;
      font-size:12px;
      line-height:13px;
      text-indent:6px;
      top:3px;
      left:-10px;
      width: 18px;
      height: 18px;
      transform: rotate(45deg);
      border-left:1px solid #C7D2D4;
      border-bottom:1px solid #C7D2D4;
  }
  

  2 và thực thể

  .pricetag{
      white-space:nowrap;
      position:relative;
      margin:0 5px 0 10px;
      displaY:inline-block;
      height:25px;
      border-radius: 0 5px 5px 0;
      padding: 0 25px 0 15px;
      background:#E8EDF0;
      border: 1px solid #C7D2D4;
      color:#999;
      line-height:23px;
  }
  .pricetag:after{
      position:absolute;
      right:0;
      margin:1px 7px;
      font-weight:bold;
      font-size:19px;
      content:"\00D7";
  }
  .pricetag:before{
      position:absolute;
      background:#E8EDF0;
      content:"\25CF";
      color:white;
      text-shadow: 0 0 1px #aaa;
      font-size:12px;
      line-height:13px;
      text-indent:6px;
      top:3px;
      left:-10px;
      width: 18px;
      height: 18px;
      transform: rotate(45deg);
      border-left:1px solid #C7D2D4;
      border-bottom:1px solid #C7D2D4;
  }
  

  3.
• Phụ huynh

  .pricetag{
      white-space:nowrap;
      position:relative;
      margin:0 5px 0 10px;
      displaY:inline-block;
      height:25px;
      border-radius: 0 5px 5px 0;
      padding: 0 25px 0 15px;
      background:#E8EDF0;
      border: 0 solid #C7D2D4;
      border-top-width:1px;
      border-bottom-width:1px;
      color:#999;
      line-height:23px;
  }
  .pricetag:after{
      position:absolute;
      right:0;
      margin:1px 7px;
      font-weight:bold;
      font-size:19px;
      content:"\00D7";
  }
  .pricetag:before{
      position:absolute;
      content:"\25CF";
      color:white;
      text-shadow: 0 0 1px #333;
      font-size:11px;
      line-height:0px;
      text-indent:12px;
      left:-15px;
      width: 1px;
      height:0px;
      border-right:14px solid #E8EDF0;
      border-top:  13px solid transparent;
      border-bottom:  13px solid transparent;
  }
  

  2 container

  .pricetag{
      white-space:nowrap;
      position:relative;
      margin:0 5px 0 10px;
      displaY:inline-block;
      height:25px;
      border-radius: 0 5px 5px 0;
      padding: 0 25px 0 15px;
      background:#E8EDF0;
      border: 1px solid #C7D2D4;
      color:#999;
      line-height:23px;
  }
  .pricetag:after{
      position:absolute;
      right:0;
      margin:1px 7px;
      font-weight:bold;
      font-size:19px;
      content:"\00D7";
  }
  .pricetag:before{
      position:absolute;
      background:#E8EDF0;
      content:"\25CF";
      color:white;
      text-shadow: 0 0 1px #aaa;
      font-size:12px;
      line-height:13px;
      text-indent:6px;
      top:3px;
      left:-10px;
      width: 18px;
      height: 18px;
      transform: rotate(45deg);
      border-left:1px solid #C7D2D4;
      border-bottom:1px solid #C7D2D4;
  }
  

  5 được đặt thành

  .pricetag{
      white-space:nowrap;
      position:relative;
      margin:0 5px 0 10px;
      displaY:inline-block;
      height:25px;
      border-radius: 0 5px 5px 0;
      padding: 0 25px 0 15px;
      background:#E8EDF0;
      border: 1px solid #C7D2D4;
      color:#999;
      line-height:23px;
  }
  .pricetag:after{
      position:absolute;
      right:0;
      margin:1px 7px;
      font-weight:bold;
      font-size:19px;
      content:"\00D7";
  }
  .pricetag:before{
      position:absolute;
      background:#E8EDF0;
      content:"\25CF";
      color:white;
      text-shadow: 0 0 1px #aaa;
      font-size:12px;
      line-height:13px;
      text-indent:6px;
      top:3px;
      left:-10px;
      width: 18px;
      height: 18px;
      transform: rotate(45deg);
      border-left:1px solid #C7D2D4;
      border-bottom:1px solid #C7D2D4;
  }
  

  6 để nó có thể mở rộng dựa trên độ dài của văn bản.

Lưu ý: Mẫu này sử dụng các biến đổi, vì vậy sẽ yêu cầu polyfills ở các phiên bản IE thấp hơn. This sample uses transforms, so will require polyfills in lower versions of IE.

div {
  position: relative;
  display: inline-block;
  width: auto;
  height: 20px;
  margin: 20px;
  padding-left: 15px;
  background: #E8EDF2;
  color: #888DA3;
  line-height: 20px;
  border-radius: 4px;
  border: 1px solid #C7D2DB;
}
div:after,
div:before {
  position: absolute;
  content: '';
  border: 1px solid #C7D2DB;
}
div:after {  /* the arrow on left side positioned using left property */
  height: 14px;
  width: 14px;
  transform: rotate(45deg);
  background: #E8EDF2;
  border-color: transparent transparent #C7D2DB #C7D2DB;
  left: -6px;
  top: 2px;
}
div:before {  /* the circle on the left */
  height: 4px;
  width: 4px;
  border-radius: 50%;
  background-color: white;
  left: 0px;
  top: 7px;
  z-index: 2;
}
.right {  /* the x mark at the right */
  text-align: right;
  margin: 0px 4px;
}

Home×

Home Sweet Home×

Hi×

Demo fiddle

Đã trả lời ngày 8 tháng 8 năm 2014 lúc 3:38Aug 8, 2014 at 3:38

HarryharryHarry

85,4K25 Huy hiệu vàng193 Huy hiệu bạc205 Huy hiệu đồng25 gold badges193 silver badges205 bronze badges

1

Tôi muốn một phiên bản đơn giản hóa của những gì đã được đề xuất ở đây (không có hiệu ứng lỗ và đường viền) nhưng với mặt chỉ của nó với góc tròn. Vì vậy, tôi đã đưa ra giải pháp này. Trực quan đây là những gì bạn nhận được:

HTML cho nó:

Marketing
Sales
Inbound

Và CSS cho nó:

.price-tag {
  background: #058;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-size: 0.875rem;
  height: 30px;
  line-height: 30px;
  margin-right: 1rem;
  padding: 0 0.666rem;
  position: relative;
  text-align: center;
}
.price-tag:after {
  background: inherit;
  border-radius: 4px;
  display: block;
  content: "";
  height: 22px;
  position: absolute;
  right: -8px;
  top: 4px;
  -ms-transform: rotate(45deg); /* IE 9 */
  -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
  transform: rotate(45deg);
  width: 22px;
  z-index: -1;
}
.price-tag:hover {
  background: #07b;
}

Đã trả lời ngày 15 tháng 4 năm 2017 lúc 0:50Apr 15, 2017 at 0:50

Leandroicoleandroicoleandroico

1.15012 huy hiệu bạc16 Huy hiệu đồng12 silver badges16 bronze badges

1

Ví dụ ban đầu

Đã sửa đổi: http://jsbin.com/ruxusobe/1/

Về cơ bản, nó cần phải nổi sang trái, sử dụng bên phải (thay vì bên trái) và sửa đổi phần đệm.

CSS:

.guideList{
    font-size: 12px;
    line-height: 12px;
    font-weight: bold;
    list-style-type: none;
    margin-top: 10px;
    width: 125px;
}

.guideList li{
    padding: 5px 5px 5px 0px;
}

.guideList .active{
    background-color: #0390d1;
    color: white;
}

.guideList .activePointer{
    margin-top: -5px;
    margin-bottom: -5px;
    float: left;
    display: inline-block;
    width: 0px;
    height: 0px;
    border-top: 11px solid white;
    border-right: 11px solid transparent;
    border-bottom: 11px solid white;
}

HTML:

    
Consulting
    
Law
    
Finance
    
Technology

Đã trả lời ngày 8 tháng 8 năm 2014 lúc 3:26Aug 8, 2014 at 3:26

Lepelepelepe

24K9 Huy hiệu vàng94 Huy hiệu bạc102 Huy hiệu Đồng9 gold badges94 silver badges102 bronze badges

Đây là một ví dụ đơn giản ...

Phiên bản Orignal

Phiên bản đã chỉnh sửa

CSS:

div {
    margin-left: 15px;
    background: #76a7dc;
    border: 1px solid #CAD5E0;
    padding: 4px;
    width:50px;
    position: relative;
}
div:after {
    content:'';
    display: block;
    position: absolute;
    top: 2px;
    left: -1.3em;
    width: 0;
    height: 0;
    border-color: transparent #76a7dc transparent transparent;
    border-style: solid;
    border-width: 10px;
}

Lưu ý trên

.pricetag{
    white-space:nowrap;
    position:relative;
    margin:0 5px 0 10px;
    displaY:inline-block;
    height:25px;
    border-radius: 0 5px 5px 0;
    padding: 0 25px 0 15px;
    background:#E8EDF0;
    border: 1px solid #C7D2D4;
    color:#999;
    line-height:23px;
}
.pricetag:after{
    position:absolute;
    right:0;
    margin:1px 7px;
    font-weight:bold;
    font-size:19px;
    content:"\00D7";
}
.pricetag:before{
    position:absolute;
    background:#E8EDF0;
    content:"\25CF";
    color:white;
    text-shadow: 0 0 1px #aaa;
    font-size:12px;
    line-height:13px;
    text-indent:6px;
    top:3px;
    left:-10px;
    width: 18px;
    height: 18px;
    transform: rotate(45deg);
    border-left:1px solid #C7D2D4;
    border-bottom:1px solid #C7D2D4;
}

.pricetag{
    white-space:nowrap;
    position:relative;
    margin:0 5px 0 10px;
    displaY:inline-block;
    height:25px;
    border-radius: 0 5px 5px 0;
    padding: 0 25px 0 15px;
    background:#E8EDF0;
    border: 1px solid #C7D2D4;
    color:#999;
    line-height:23px;
}
.pricetag:after{
    position:absolute;
    right:0;
    margin:1px 7px;
    font-weight:bold;
    font-size:19px;
    content:"\00D7";
}
.pricetag:before{
    position:absolute;
    background:#E8EDF0;
    content:"\25CF";
    color:white;
    text-shadow: 0 0 1px #aaa;
    font-size:12px;
    line-height:13px;
    text-indent:6px;
    top:3px;
    left:-10px;
    width: 18px;
    height: 18px;
    transform: rotate(45deg);
    border-left:1px solid #C7D2D4;
    border-bottom:1px solid #C7D2D4;
}

Đã trả lời ngày 8 tháng 8 năm 2014 lúc 3:32Aug 8, 2014 at 3:32

imbondbabyimbondbabyimbondbaby

6.2833 Huy hiệu vàng20 Huy hiệu bạc53 Huy hiệu Đồng3 gold badges20 silver badges53 bronze badges

Sử dụng phần tử

.pricetag{
    white-space:nowrap;
    position:relative;
    margin:0 5px 0 10px;
    displaY:inline-block;
    height:25px;
    border-radius: 0 5px 5px 0;
    padding: 0 25px 0 15px;
    background:#E8EDF0;
    border: 1px solid #C7D2D4;
    color:#999;
    line-height:23px;
}
.pricetag:after{
    position:absolute;
    right:0;
    margin:1px 7px;
    font-weight:bold;
    font-size:19px;
    content:"\00D7";
}
.pricetag:before{
    position:absolute;
    background:#E8EDF0;
    content:"\25CF";
    color:white;
    text-shadow: 0 0 1px #aaa;
    font-size:12px;
    line-height:13px;
    text-indent:6px;
    top:3px;
    left:-10px;
    width: 18px;
    height: 18px;
    transform: rotate(45deg);
    border-left:1px solid #C7D2D4;
    border-bottom:1px solid #C7D2D4;
}

div {
  position: relative;
  display: inline-block;
  width: auto;
  height: 20px;
  margin: 20px;
  padding-left: 15px;
  background: #E8EDF2;
  color: #888DA3;
  line-height: 20px;
  border-radius: 4px;
  border: 1px solid #C7D2DB;
}
div:after,
div:before {
  position: absolute;
  content: '';
  border: 1px solid #C7D2DB;
}
div:after {  /* the arrow on left side positioned using left property */
  height: 14px;
  width: 14px;
  transform: rotate(45deg);
  background: #E8EDF2;
  border-color: transparent transparent #C7D2DB #C7D2DB;
  left: -6px;
  top: 2px;
}
div:before {  /* the circle on the left */
  height: 4px;
  width: 4px;
  border-radius: 50%;
  background-color: white;
  left: 0px;
  top: 7px;
  z-index: 2;
}
.right {  /* the x mark at the right */
  text-align: right;
  margin: 0px 4px;
}

Mã HTML là:

.pricetag{
    white-space:nowrap;
    position:relative;
    margin:0 5px 0 10px;
    displaY:inline-block;
    height:25px;
    border-radius: 0 5px 5px 0;
    padding: 0 25px 0 15px;
    background:#E8EDF0;
    border: 0 solid #C7D2D4;
    border-top-width:1px;
    border-bottom-width:1px;
    color:#999;
    line-height:23px;
}
.pricetag:after{
    position:absolute;
    right:0;
    margin:1px 7px;
    font-weight:bold;
    font-size:19px;
    content:"\00D7";
}
.pricetag:before{
    position:absolute;
    content:"\25CF";
    color:white;
    text-shadow: 0 0 1px #333;
    font-size:11px;
    line-height:0px;
    text-indent:12px;
    left:-15px;
    width: 1px;
    height:0px;
    border-right:14px solid #E8EDF0;
    border-top:  13px solid transparent;
    border-bottom:  13px solid transparent;
}

Mã CSS là:

.pricetag{
    white-space:nowrap;
    position:relative;
    margin:0 5px 0 10px;
    displaY:inline-block;
    height:25px;
    border-radius: 0 5px 5px 0;
    padding: 0 25px 0 15px;
    background:#E8EDF0;
    border: 0 solid #C7D2D4;
    border-top-width:1px;
    border-bottom-width:1px;
    color:#999;
    line-height:23px;
}
.pricetag:after{
    position:absolute;
    right:0;
    margin:1px 7px;
    font-weight:bold;
    font-size:19px;
    content:"\00D7";
}
.pricetag:before{
    position:absolute;
    content:"\25CF";
    color:white;
    text-shadow: 0 0 1px #333;
    font-size:11px;
    line-height:0px;
    text-indent:12px;
    left:-15px;
    width: 1px;
    height:0px;
    border-right:14px solid #E8EDF0;
    border-top:  13px solid transparent;
    border-bottom:  13px solid transparent;
}

Đã trả lời ngày 8 tháng 8 năm 2014 lúc 3:39Aug 8, 2014 at 3:39

Kheema Pandeykheema PandeyKheema Pandey

9.8094 Huy hiệu vàng24 Huy hiệu bạc26 Huy hiệu đồng4 gold badges24 silver badges26 bronze badges

1

Làm thế nào để bạn tạo một thẻ giá trong HTML?

Làm cách nào để thêm một giỏ hàng trong HTML?

Làm thế nào để bạn làm một bảng giá?