Home/ Questions/Q 7798403
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T23:59:38+00:00

Is there a way a way to create Delicious-like arrow tags without the use

  • 0

Is there a way a way to create Delicious-like “arrow tags” without the use of images:
Delicious tags

I’m familiar with the border-triangle technique, but couldn’t get that to look decent (in part because we’d need an additional outer border to frame the entire component).

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I create a little example may be that’s you want .

    CSS

    div{
    padding:5px 10px;
    font-size:12px;
    -moz-border-radius:0 5px 5px 0;
    -webkit-border-radius:0 5px 5px 0;
    float:left;
    margin-left:30px;
    margin-top:20px;
    position:relative;
    font-family:verdana;
    color:#3b3d3c;
    border:1px solid #d5d5d7;
    border-left:0;
}

div{
    background: -moz-linear-gradient( top , #fbfdfc 0%,#f6f5f5 100%);
    background: -webkit-linear-gradient( top , #fbfdfc 0%,#f6f5f5 100%);  
}

div:after{
    content:"";
     width:18px;
     height:18px;
     background: -moz-linear-gradient( left top , #fbfdfc 0%,#f6f5f5 100%);
    background: -webkit-linear-gradient( left top , #fbfdfc 0%,#f6f5f5 100%);
     -moz-transform: rotate(45deg);
     -webkit-transform: rotate(45deg);
     display:block;
    position:absolute;
    top:3px;
    left:-10px;
    z-index:-1;
    border:1px solid  #d5d5d7;
}

    Check this http://jsfiddle.net/9EEEP/76/

    UPDATED
    Now work in chrome also

    http://jsfiddle.net/9EEEP/77/

    For more you check my this answer also How to code certain css shapes?

    I use css3 which not work in IE8 below browsers.

    • 0