@chifixsa

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

Нужно сделать что-то похожее на, что на картинке.
2fd12730f7f648f08e670cc2673bdb28.PNG
Как сделал это я: ссыль на jsbin
Вопрос таков:
Можно ли это дело сделать проще, если да, то как? Т.е. без дополнительного дива, а только одним или еще каким способом покороче.
UPD. Еще нужно, чтобы блок с бордером был полупрозрачный для видимости фона body
7931e4c887c74ebd9275c216d22a9fc8.PNG
  • Вопрос задан
  • 1500 просмотров
Решения вопроса 1
aliencash
@aliencash
Партизан
.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
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
webinar
@webinar
Учим yii: https://youtu.be/-WRMlGHLgRg
Сделать блок, который его перекроет, удобнее всего с помощью :before или :after
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы