Вопрос по css, css3 – теги стрелок чистого изображения без CSS

5

Есть ли способ создать Delicious-подобные & quot; стрелки-метки & quot; без использования изображений: Delicious tags

Я знаком стехника пограничного треугольника, но не могу сделать так, чтобы это выглядело прилично (частично потому, что нам нужна дополнительная внешняя граница для обрамления всего компонента).

Indeed - таким образом, мой комментарий о постепенной деградации. AnC
Если я правильно помню, SVG не работает сразу из всех браузеров - плюс с HTML + CSS вы (надеюсь) получаете гораздо более изящную деградацию. AnC
Как насчет svg? Marcin
Браузеры, которые не поддерживают SVG, обычно не поддерживают CSS3. Marcin

Ваш Ответ

1   ответ
8

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

Проверь этоhttp: //jsfiddle.net/9EEEP/76

ОБНОВЛЕНО Теперь и в Chrome

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

Более того, вы также можете проверить мой ответ Как кодировать определенные формы CSS?

Я использую css3, который не работает в IE8 ниже браузеров.

Пожалуйста, опубликуйте свой код здесь, а не только на JS Fiddle, для дальнейшего использования. И чтобы покрыть вероятность падения JS Fiddle. David Thomas
У него странный тег внизу треугольника на хроме. Marcin
Спасибо, это очень мило! Тем не менее, в настоящее время он кажется немного глючит в Firefox; наконечник стрелы и вал имеют разную высоту (попробуйте увеличить). Я немного поиграюсь с этим, прежде чем принять; возможно, использование непиксельных единиц поможет. AnC
просто из любопытства, интересно, если говорить о производительности, лучше ли использовать изображение вместо CSS? Я имею в виду, что эти строки CSS могут занимать примерно 1-2 КБ. deathlock
Интересно, но этот CSS невероятно хрупок. Я обнаружил, что почти невозможно адаптироваться вне этого простого примера JSFiddle. Малейшее изменение приводит к исчезновению стрелки. Cerin

Похожие вопросы