Как прервать border с одной стороны и сделать его похожим на outline, т.е вокруг контейнера?

Question

[chifixsa]

Нужно сделать что-то похожее на, что на картинке.

Как сделал это я: ссыль на jsbin
Вопрос таков:
Можно ли это дело сделать проще, если да, то как? Т.е. без дополнительного дива, а только одним или еще каким способом покороче.
UPD. Еще нужно, чтобы блок с бордером был полупрозрачный для видимости фона body

Answer 1

[Андрей Федоров]

.parent {
  margin: 50px auto;
  width: 320px;
  background-image: linear-gradient(orangered 20%, transparent 20%, transparent 80%, orangered 80%);
  padding: 10px;
  padding-right: 0;
}
.arrow {
  position: relative;
  width: auto;
  height: 200px;
  background: rgb(240,240,240);
  border-right: 10px solid orangered;
  }

UPD: Ладно, тогда так:
codepen.io/aliencash/pen/ONmOdV

Comments

[chifixsa]

то что доктор прописал, спасибо

Answer 2

[Максим Тимофеев]

Сделать блок, который его перекроет, удобнее всего с помощью :before или :after

Comments

[chifixsa]

Это хорошо, если пример как у меня на картинке. А если фон будет не монотонным, а какой-то картинкой или текстурой, то не пойдет, ибо этот псевдоэлемент в таком случае должен быть прозрачным, а прозрачный не закроет outline. Забыл про это дописать в вопросе.

[Максим Тимофеев]

chifixsa: тогда canvas или svg

[chifixsa]

Максим Тимофеев: или вариант, что подсказали выше

[Максим Тимофеев]

chifixsa: ДА отличный вариант. Но надо тестить, часто с linear-gradient баги в браузерах, например яндексе при ресайзе окна и на некоторых расширениях.