CSS3 форма меню, стиль

Question

Может кто-нибудь сказать мне, как я могу создать такую ​​форму в CSS, с треугольником по центру сверху или снизу, как я хочу?

Редактировать:

С одним элементом.

Answer 1

@ гарри; Есть много способов создать этот тип треугольников стрелки. Я редактирую скрипку @jam и центрирую стрелки.

CSS:

div
{
    background: #76a7dc;
    padding: 10px;
    display: inline;
    position:relative;
}

div:after
{
    border-color: #76a7dc transparent;
    border-style: solid;
    border-width: 10px 10px 0;
    content: "";
    margin-top: 5px;
    display: block;
    position: absolute;
    width: 0;
    margin-left:-10px;
    left:50%;
    bottom:-9px;
}

проверьте этот пример http://jsfiddle.net/sandeep/wWykY/2/

Answer 2

Есть этот JSFiddle , который будет делать в основном то, что вы хотите. Тем не менее, «острый бит» будет выравниваться только влево. Я предлагаю вам взглянуть на эти примеры и посмотреть, есть ли такие, которые похожи на то, что вы хотите.

---

Чтобы центрировать стрелку под рамкой, присвойте ей свойство left: 15px, указав ширину рамки 50px. Это отцентрирует стрелку, но единственная проблема заключается в том, что вам придется вручную устанавливать позицию. Пример здесь .