CyberCoders Style Tags

by Troy Alford

HTML

<tag>Tag Text</tag>
<tag>Style Tag</tag>
<tag>Very Very Stretchy Tag</tag>

CSS

tag, tag:before, tag:after { box-sizing: border-box; border: 1px solid #666; }
tag {
    border-color: #ccc #999 #999 transparent;
    border-width: 1px 1px 1px 0;
    color: #666;
    display: inline-block;
    position: relative;
    height: 20px;
    font-size: 10px;
    font-family: Arial;
    padding: 3px 5px 3px 10px;
    margin-left: 15px;
}
tag:before, tag:after { display: inline-block; content: ''; position: absolute; }
tag, tag:before { background: #f7f6f4; }
tag, tag:after { box-shadow: 0px 1px 0 0 #fff inset; }

tag:before { 
    height: 16px; top: 1px; left: -8px; width: 16px; 
    border-color: transparent transparent #aaa #bbb;
    border-width: 0 0 1px 1px;
    content: '◦';
    font-size: 20px;
    padding: 0 0 0 5px;
    line-height: 12px;
    color: #bbb;
    -webkit-transform: rotate(45deg);
    border-radius: 3px 3px 3px 5px;
}
tag:after {
    background: #cfcfcf;
    border-color: #ccc #999 #999 #bbb;
    width: 7px; height: 18px;
    top: 0px; right: -7px;
    border-radius: 0 2px 2px 0;
}