如何在 CSS 和 HTML 中创建价格标签形状

Question

所以我找到了这个答案 - CSS3 menu shape, style 但不知道如何将它放在左侧。我已经搜索过了，但没有运气。

这就是我想要实现的目标：

我也找到了这个 - Change the shape of the triangle。我怎样才能让它在另一边工作？我的意思是箭头需要在左侧。一个div可以做到这一点吗？

Answer 1

想要一个可以覆盖任何背景颜色的颜色吗？

jsBin demo

只有这个 HTML：

<span class="pricetag"></span>

还有这个 CSS：

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

基本上遵循这个原则：How to create a ribbon shape in CSS

---

如果你想在四周添加边框：

jsBin demo with transform: rotate(45deg) applied to the :before pseudo

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

Answer 2

由于问题中的示例图像具有额外的外边框，因此使用边框技巧实现它会涉及多个（伪）元素并且会变得复杂（因为除了箭头形状之外，前面还需要一个圆圈）。相反，可以通过使用transform: rotate() 来实现相同的效果，如下例所示。

方法很简单，如下：

• 父容器div 包含应该出现在价格标签形状中的文本。
• :after 伪元素具有transform: rotate(45deg) 并生成三角形。然后相对于父级的左边缘绝对定位。伪元素上设置的background 可防止父容器的左边框可见。
• :before 伪元素形成左侧的圆圈（使用 border-radius）。
• 末尾的 X 标记是使用 span 标记和 × 实体添加的。
• 父容器div的width设置为auto，这样就可以根据文本的长度进行扩展。

注意：此示例使用转换，因此在较低版本的 IE 中需要 polyfill。

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div>Home<span class='right'>&times;</span>
</div>
<div>Home Sweet Home<span class='right'>&times;</span>
</div>
<div>Hi<span class='right'>&times;</span>
</div>

Fiddle Demo

Answer 3

我想要这里提出的简化版本（没有孔效果和边框），但它的指向侧也带有圆角。所以我想出了with this solution。从视觉上看，这就是你得到的：

它的 HTML：

<div class="price-tag">Marketing</div>
<div class="price-tag">Sales</div>
<div class="price-tag">Inbound</div>

以及它的 CSS：

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

Answer 4

original example

修改：http://jsbin.com/ruxusobe/1/

基本上，它需要向左浮动，使用border-right（而不是left）并修改padding。

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：

<ul class="guideList">
    <li><a>Consulting</a></li>
    <li class="active"><span class="activePointer"></span>Law</li>
    <li><a>Finance</a></li>
    <li><a>Technology</a></li>
</ul>

Answer 5

这是一个简单的例子……

Orignal Version

Edited Version

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

注意border-color，只有right 设置了颜色，其他所有设置为透明。

Answer 6

使用pseudo 元素并稍微玩一下border，您就可以做到这一点。检查DEMO。

HTML 代码是：

<a class="arrow" href="#">Continue Reading</a>

CSS 代码为：

body{padding:15px;}  
.arrow {
    background: #8ec63f;
    color: #fff;
    display: inline-block;
    height: 30px;
    line-height: 30px;
    padding: 0 12px;
    position: relative;
    border-radius: 4px;
    border: 1px solid #8ec63f;

    }
    .arrow:before {
    content: "";
    height: 0;
    position: absolute;
    width: 0;
    }
    .arrow:before {
    border-bottom: 15px solid transparent;
    border-right: 15px solid #8ec63f;
    border-top: 15px solid transparent;
    left: -15px; 
    }

   .arrow:hover {
    background: #f7941d;
    color: #fff;
     border-radius: 4px;
    border: 1px solid #f7941d;
    }
    .arrow:hover:before {
    border-bottom: 15px solid transparent;
    border-top: 15px solid transparent;;
    border-right: 15px solid #f7941d;
    }