Как сделать поле со стрелкой в ​​CSS?

Ответ 1

Вот так:

.arrow {
    border: solid 10px transparent;
    border-right-color: #FFF;
}

Демо: http://jsfiddle.net/sparkup/edjdxjf2/

ОБНОВЛЕНИЕ:

Он также может быть достигнут без пустых элементов с свойством css :before

element:before {
    content: "";
    position: absolute;
    top: 50%;                         // half way down (vertical center).
    margin-top: -15px;                // adjust position, arrow has a height of 30px. 
    left:-30px;
    border: solid 15px transparent;
    border-right-color: #FFF;
    z-index: 1;
}

Демо: http://jsfiddle.net/sparkup/y89f1te0/

надеюсь, что это поможет

Ответ 2

Chris Coyier имеет превосходный обзор возможных форм, построенных в CSS, используя один элемент (и перед/после): http://css-tricks.com/examples/ShapesOfCSS/

Ответ 3

Стандартный инструмент

Если вам нужна простая стрелка, вы можете добавить псевдоэлемент с помощью border-right.

body {
    background:#ff004e;
    padding:40px;
}
p {
    background:white;
    border-radius: 10px;
    width:250px;
    height:150px;
    position: relative;
    display: inline-block;
}
p:before {
    content:"";
    position: absolute;
    height: 0px;
    width: 0px;
    top: 60px;
    left: -29px; /* 1px buffer for zooming problems while rendering*/
    border-width: 15px;
    border-color: transparent white transparent transparent;
    border-style: solid;
}

<p></p>

Ответ 4

a.right{ border-style: dashed;
  border-color: transparent;
  border-width: 0.53em;
  display: -moz-inline-box;
  display: inline-block;
  font-size: 100px;
  height: 0;
  line-height: 0;
  position: relative;
  vertical-align: middle;
  width: 0; border-left-width: 1em;
  border-left-style: solid;
  border-left-color: #666;
  left: 0.25em; }

приведенный выше код можно использовать для стрелки вправо.

Ответ 5

Мой ответ (без плоского края), добавлена ​​некоторая формула расчета:

.mainBox {
    border: solid 1px #e0e0e0;        
}

.mainBox:before {
    content:"";
    position: absolute;
    /*The right value must be calculated with: (top value of after) - (top value of before) = (right value of before) */
    /*example: (-4px) - (-7px) = 3px*/
    right: 72px; 
    /*The `top` value must be identical to border-width*/
    top: -7px; 
    width: 0;
    height: 0;
    border-style: solid;
    /*The `border-width` value must be identical to top*/
    border-width: 0 7px 7px 7px;
    /*The border color 3rd (#e0e0e0) value must be identical to its parent border color*/
    border-color: transparent transparent #e0e0e0 transparent;
    /*The (z-index of before) must at least one below the (z-index of after)*/
    /*Example: (z-index of before) < (z-index of after) or 9998 < 9999*/
    z-index:9998;
}

.mainBox:after {
    content:"";
    position: absolute;
    right: 75px;
    top: -4px; /*suppose to be identical to border-width*/
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 4px 4px 4px;
    border-color: transparent transparent #fff transparent; 
    z-index:9999;
}

Основные правила:

• Значение до правого значения должно быть рассчитано с помощью: (after top) - (before top) = (before right)

пример: (-4px) - (-7px) = 3px

2. Значения before и after top должны быть идентичны border-width.

3. Значение цвета границы 3-го (# e0e0e0 в примере) должно быть идентично цвету его родительской границы.

4. before z-index должен быть хотя бы один ниже after z-index.

: (before z-index) < (after z-index) или 9998 < 9999.

Результат:

Ответ 6

Вы можете использовать span, если вы не хотите использовать div.

span#pointer{border:solid 10px transparent;border-right-color:#fff;position:absolute;margin:-85px 0 0 -20px;}

http://jsfiddle.net/SSKwn/