Прерывистая рамка

#html #css #css3 #border

Как сделать такую прерывистую рамку? 



Без использования clip-path. Понимаю, что надо использовать псевдоэлементы с бордерами.
Но их получится слишком много.
 Есть ли простой способ?
    

Ответы

Ответ 1

Смотреть на весь экран




* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

.wrapper {
  width: 40rem;
  height: 20rem;
  background-image: url('https://images.unsplash.com/photo-1503264116251-35a269479413?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=281dd3518c2edb68c31b19bbcb624a0f&auto=format&fit=crop&w=1350&q=80');
  padding: 1rem;
}

.wrapper .wrapper-img {
  width: 100%;
  height: 100%;
  background-image: linear-gradient(white, white), linear-gradient(90deg, white 150px,
transparent 2vw), linear-gradient(transparent 15vw, white 15vw), linear-gradient(90deg,
white 25vw, transparent 25vw, transparent 40vw, white 40vw);
  background-size: 4px 100%, 150px 4px, 4px 200px, 100% 4px;
  background-position: 0 0, 0 0, 100% 100%, 100% 100%;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
}

  

  
Ответ 2

Немного псевдоэлементов - точнее один 


  смотреть на полную страницу




* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

img {
  display: block;
  max-width: 100%;
  object-fit: cover;
}

.block {
  width: 768px;
  margin: auto;
  position: relative;
  height: 480px;
  position: relative;
  border-bottom: 1px solid red;
}

.elem:nth-of-type(1) {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

.elem:nth-of-type(2) {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 20px;
}

.block--elem__mod1 {
  width: 320px;
  height: 440px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
}

.block--elem__mod1:after {
  content: "";
  position: absolute;
  top: 20px;
  left: 20px;
  width: 200px;
  height: 0;
  border: 1px solid #fff;
}

.block--elem__mod2 {
  width: 200px;
  height: 300px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
}

  

    
  
  

    

    

  



Ответ 3

Добавлю еще резиновую реализацию:



.home {
  width: 100%;
  height: 70vh;
  min-height: 300px;
  background: black url('https://9to5mac.com/wp-content/uploads/sites/6/2018/08/xsw-featured.png?w=1600')
no-repeat;
  background-size: cover;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font: 36px Arial;
}

.home:before {
  content: '';
  display: block;
  position: absolute;
  top: 1vw;
  left: 1vw;
  right: 50%;
  bottom: 1vw;
  border-left: 4px solid white;
  border-bottom: 4px solid white;
  background: linear-gradient(white, white) no-repeat;
  background-size: 30% 4px;
}

.home:after {
  content: '';
  display: block;
  position: absolute;
  top: 40%;
  left: 80%;
  right: 1vw;
  bottom: 1vw;
  border-right: 4px solid white;
  border-bottom: 4px solid white;
}

  stackoverflow