How to create a pricetag shape in CSS and HTML

问题

So I've found this answer - CSS3 menu shape, style but have no idea on how to put it on the left side. I've searched for it already but with no luck.

This is what I'm trying to achieve:

And I've found this one also - Change the shape of the triangle. How can I make it work on the opposite side? I mean the arrow needs to be on the left side. And is it possible to do this with one div?

回答1:

Want one that you can put over any background color?

jsBin demo

Only this HTML:

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

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

which basically follows this principles: How to create a ribbon shape in CSS

If you want to add borders all around:

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

回答2:

Since the example image in the question has extra outer borders, achieving it with the border trick will involve multiple (pseudo) elements and will become complex (because in addition to the arrow shape, a circle is also needed in front). Instead, the same could be achieved by using transform: rotate() like in the below sample.

The approach is pretty simple and as follows:

The parent div container houses the text that should be present within the price-tag shape.
The :after pseudo-element has transform: rotate(45deg) and produces the triangle shape. This is then positioned absolutely with respect to the left edge of the parent. The background set on the pseudo-element prevents the left border of the parent container from being visible.
The :before pseudo-element forms the circle present on the left side (using border-radius).
The X mark at the end is added using a span tag and the × entity.
The parent div container's width is set to auto so that it can expand based on the length of the text.

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

<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

回答3:

I wanted a simplified version of what was proposed here (without the hole effect and borders) but with the pointing side of it with rounded corner as well. So I came up with this solution. Visually this is what you get:

The HTML for it:

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

And the CSS for it:

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

回答4:

original example

Modified: http://jsbin.com/ruxusobe/1/

Basically, it needs to float left, use border-right (instead of left) and modify the 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>

回答5:

Here is a simple example...

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

Notice on border-color, only right is set with a color and everything else is set to transparent.

回答6:

using pseudo element and a little bit playing with border you can achieve the exact thing. Check the DEMO.

HTML code is :

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

CSS Code is:

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

来源：https://stackoverflow.com/questions/25195526/how-to-create-a-pricetag-shape-in-css-and-html

标签

html

css

css3

css-shapes