css стрелка с нижней границей

Мне нужно создать стрелку внутри div. Я создал стрелку, но мне нужно получить визуальный эффект с рамкой, как показано ниже.

введите здесь описание изображения

Демонстрация проверенного образца http://jsfiddle.net/rLZkf/4/

div {
  margin: 20px;
  height: 200px;
  width: 200px;
  background-color: #c1c1c1;
  border: #000 solid 2px;
  background-image: -webkit-linear-gradient(135deg, transparent 75%, #fff 75%), -webkit-linear-gradient(45deg, transparent 75%, #fff 75%);
  background-image: -moz-linear-gradient(135deg, transparent 75%, #fff 75%), -moz-linear-gradient(45deg, transparent 75%, #fff 75%);
  background-image: -ms-linear-gradient(135deg, transparent 75%, #fff 75%), -ms-linear-gradient(45deg, transparent 75%, #fff 75%);
  background-image: -o-linear-gradient(135deg, transparent 75%, #fff 75%), -o-linear-gradient(45deg, transparent 75%, #fff 75%);
  background-image: linear-gradient(135deg, transparent 75%, #fff 75%), linear-gradient(45deg, transparent 75%, #fff 75%);
  background-position: 30px 0, 0 0;
  background-repeat: no-repeat;
  background-size: 30px 30px;
}
<div></div>


html css css-shapes
person Sowmya    schedule 28.09.2012    source источник

Ответы (2)


arrow_upward
4
arrow_downward

Для этого вы можете использовать свойство CSS3 rotate. Пишите так:

div {
    margin:20px;
    height: 200px;
    width: 200px;
    background-color: #c1c1c1;
    border:#000 solid 2px;
    position:relative;
}
div:after{
    content:'';
    width:20px;
    height:20px;
    background:#fff;
    position:absolute;
    -moz-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    transform:rotate(45deg);
    top:-11px;
    left:10px;
    border-right:#000 solid 2px;
    border-bottom:#000 solid 2px;
}

Проверьте это http://jsfiddle.net/rLZkf/6/.

ОБНОВЛЕНО

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

person sandeep    schedule 28.09.2012
comment
Эй, Сандип, спасибо, но тело имеет другой цвет, в этом случае стрелка также видна в верхней части div. вот пример jsfiddle.net/rLZkf/8 Как мы можем это исправить?? - person Sowmya; 28.09.2012
comment
Проверьте нужную ссылку jsfiddle.net/rLZkf/9. - person sandeep; 28.09.2012
comment
Эй, это не работает IE .. Все в порядке, если он работает с IE 9. Можете ли вы проверить - person Sowmya; 28.09.2012
comment
Я добавил -ms-transform:rotate(45deg); он работает для IE 9, но не для версий ниже - person Sowmya; 28.09.2012

arrow_upward
0
arrow_downward

Лично мне очень нравится использовать здесь другой подход к выбранному ответу.

Используя принцип, описанный на https://css-tricks.com/snippets/css/css-triangle/ например, вы можете использовать два псевдоэлемента для создания нужного вам эффекта.

Вы в основном создадите два треугольника, используя этот трюк с границей: один будет того же цвета, что и фон вашей страницы, а другой будет того же цвета, что и граница вашего контейнера, и будет действовать как «граница» для первого треугольника.

Затем вы просто смещаете положение двух треугольников, чтобы они находились поверх границы вашего контейнера, и все.

.container:after,
.container:before {
  border-left: 10px solid transparent;
  border-right: 10px solid transparent; 
  content: " ";
  left: 10px; 
  margin-top: -1px;
  position: absolute;
}

.container:before {
  border-top: 10px solid #000;
  top: 1px; 
}

.container:after {
  border-top: 10px solid #fff;
  top: 0px; 
}

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

Краткий пример см. на http://codepen.io/arnaudvalle/pen/EjgYrp.

person Arnaud Valle    schedule 20.05.2015