Граница с прозрачной центрированной стрелкой

Я пытаюсь создать div с нижней границей, которая имеет стрелку вниз . У div будет изображение в нем и не должно быть верхней, правой или левой границы. Заполнение стрелки вниз указывает на то же, что и div или прозрачно.

Я смог заставить его работать по большей части, используя следующий код:

.hero { position: relative; background-color: yellow; height: 320px !important; width: 100% !important; border-bottom: 1px solid red; } .hero:after { content: ''; position: absolute; top: 100%; left: 50%; margin-left: -50px; width: 0; height: 0; border-top: solid 50px #e15915; border-left: solid 50px transparent; border-right: solid 50px transparent; } 
 

См. Эту скрипту: http://jsfiddle.net/alisamii/tjep3h8t/

Независимо от того, что я пытаюсь сделать для «выдолбленной» стрелки, либо получается безграничный div (поэтому он имеет заливку желтого цвета, но никакой границы на какой-либо стороне) или на границе, которая проходит вокруг всего div.

Любая помощь?

Для этого можно использовать два метода с помощью CSS3. Один использует skewX на skewX а другой использует rotate на skewX . Оба метода также реагируют .

Использование Skew:

Этот метод адаптирован из ответа веб-тики в этой теме. Он в основном использует два псевдоэлемента (с примерно 50% ширины контейнера), которые перекошены в противоположных направлениях и расположены соответствующим образом, чтобы достичь формы стрелки. У форм есть границы, где в качестве background задано значение прозрачности, что означает, что псевдоэлементы будут создавать эффект нижней границы + вниз. В этом примере стрелочная заливка всегда будет прозрачной (или цвета тела).

 body { background: rgb(245, 242, 242); } .bordered { position: relative; height: 200px; width: 200px; margin: 10px; line-height: 200px; } .bordered:after, .bordered:before { position: absolute; content: ' '; height: 8px; width: 50%; bottom: 0px; } .bordered:before { left: 0px; border-top: 1px solid gray; border-right: 1px solid gray; transform-origin: left bottom; transform: skewX(45deg); } .bordered:after { right: 0px; border-top: 1px solid gray; border-left: 1px solid gray; transform-origin: right bottom; transform: skewX(-45deg); } .bordered img { width: 150px; padding: 25px; vertical-align: middle; } /* Just for demo */ .bordered { transition: all 1s; text-align: center; } .bordered:hover { height: 250px; width: 250px; line-height: 250px; } того, как body { background: rgb(245, 242, 242); } .bordered { position: relative; height: 200px; width: 200px; margin: 10px; line-height: 200px; } .bordered:after, .bordered:before { position: absolute; content: ' '; height: 8px; width: 50%; bottom: 0px; } .bordered:before { left: 0px; border-top: 1px solid gray; border-right: 1px solid gray; transform-origin: left bottom; transform: skewX(45deg); } .bordered:after { right: 0px; border-top: 1px solid gray; border-left: 1px solid gray; transform-origin: right bottom; transform: skewX(-45deg); } .bordered img { width: 150px; padding: 25px; vertical-align: middle; } /* Just for demo */ .bordered { transition: all 1s; text-align: center; } .bordered:hover { height: 250px; width: 250px; line-height: 250px; } 
   

Простое решение, в котором фон стрелки будет прозрачным, позволяя использовать его при смене фона:

HTML:

 

CSS:

 .side-line { display: inline-block; border-top: 1px solid black; width: 20%; } .triangle { display: inline-block; height: 7px; width: 7px; transform: rotate(45deg); transform-origin: center center; border-top: 1px solid black; border-left: 1px solid black; margin-left: -3px; margin-right: -3px; margin-bottom: -3px; } 

Демо-версия: http://jsfiddle.net/85saaphw/

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

 .hero { position: relative; background-color: yellow; height: 320px !important; width: 100% !important; border-bottom: 1px solid red; } .hero:before { content: ''; position: absolute; top: 100%; left: 50%; margin-left: -50px; width: 0; height: 0; border-top: solid 50px #e15915; border-left: solid 50px transparent; border-right: solid 50px transparent; } .hero:after { content: ''; position: absolute; top: 100%; left: 50%; margin-left: -48px; width: 0; height: 0; border-top: solid 48px yellow; border-left: solid 48px transparent; border-right: solid 48px transparent; } 
 
  • Перезагрузка страницы дает неправильный запрос GET с режимом AngularJS HTML5
  • tags header / footer / nav - что происходит с ними в IE7, IE8 и браузерах, чем не поддерживают HTML5?
  • Холст HTML5 и ширина линии
  • Значения CSS с использованием атрибута данных HTML5
  • Html5 Заполнители с .NET MVC 3 Razor EditorДля расширения?
  • Как изменить изображение с помощью canvasа HTML5?
  • Возможно ли воспроизводить streamи интернет-радиосигналов shoutcast с помощью html5?
  • Закрытие тегов в HTML5
  • Замена событий мутации DOM
  • Как преобразовать входное значение в верхний регистр в угловом 2 (значение, передаваемое в ngControl)
  • Холст растягивается при использовании CSS, но нормальный с свойствами «ширина» / «высота»
  • Interesting Posts

    Объединение двух входящих широкополосных линий для более быстрого доступа в Интернет

    Метод сравнения нарушает его общий контракт! Только Java 7

    Как проверить метод, вызывается два раза с помощью mockito verify ()

    Разница между Destroy и Delete

    Вход в Google не работает после публикации в магазине воспроизведения

    Скопируйте копию Mac-диска, как это сделать?

    Как я могу читать / передавать файл без загрузки всего файла в память?

    Почему люди говорят, что при использовании генератора случайных чисел существует модульное смещение?

    Как открыть JavaFX FileChooser из classа controllerа?

    Как преобразовать Список в другой список

    Служба Mysql не запускается, ошибка функции инициализации InnoDB

    Нечеткая строка поиска в Java

    Android: Генерировать случайный цвет при нажатии?

    Как извлечь текст, который находится между круглыми скобками (круглые скобки)?

    Как я могу получить текущую ориентацию экрана?

    Давайте будем гением компьютера.