Как построена каретка на Twitter Bootstrap?

Это скорее вопрос любопытства, чем то, что мне действительно нужно знать.

На этой странице:

http://twitter.github.com/bootstrap/components.html#buttonDropdowns

Как создается конструкция маленькой стрелки/стрелки вниз? Пытаясь с Firebug, похоже, что он просто сделан с прозрачными границами, но... Мне что-то не хватает.

Bootstrap очень крутой. Я просто получил это с Symfony.

Ответ 1

Это только с границами. Когда вы видите стрелки, подобные этому, разработчик, скорее всего, использовал псевдоэлементы для их создания. В основном, что происходит, вы создаете прозрачный ящик без содержимого, и поскольку там ничего нет, все, что вы видите, это один из углов границы. Это удобно выглядит как стрелка.

Как это сделать:

.foo:before {
    content: ' ';
      height: 0;
      position: absolute;
      width: 0;
      border: 10px solid transparent;
      border-left-color: #333;
}

http://jsfiddle.net/fGSZx/

Вот некоторые ресурсы, которые помогут:

Треугольник CSS из CSS-трюков (это должно очистить все)

Smashing Mag статья о: до и: после

Ответ 2

Вот CSS для ориентированного вверх каретки, основанного на CSS из бутстрапа:

.caret-up {
  display: inline-block;
  width: 0px;
  height: 0px;
  margin-left: 2px;
  vertical-align: middle;
  border-top: none;
  border-bottom: 4px solid #FFFFFF;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  border-top-width: 0px;
  border-top-style: dotted;
  content: "";
}