Обрезанная рамка

165

20 октября 2019, 18:30

Как сделать рамку как на фото? Чтобы она обрывалась в одном месте и повторяла обрезанный угол? У меня есть идея только с clip-path.

Answer 1

К примеру если зайти на сайт этого задания и открыть DevTools и посмотреть как устроена это рамочка то становится всё ясно

Своими словами : https://codepen.io/topicstarter/pen/jdgEoy

Cмотрим код:

.card-wrapper { 
  -webkit-box-pack: center; 
  justify-content: center; 
  -webkit-box-align: center; 
  align-items: center; 
  display: -webkit-box; 
  display: flex; 
  width: 320px; 
  border-radius: 10px; 
  background: linear-gradient(135deg, red 31px, #1698d9 0); 
  height: 490px 
}

<div class="card-wrapper"> 
 
</div>

Далее мы накладываем блок со своим фоновым рисунком который перекроет родительский блок с градиентом и с именем card и потом уже вид становится таким :

@font-face { 
  font-family: 'Exo 2 Thin'; 
  src: url(../fonts/Exo2.0-Thin.otf); 
  src: url(../fonts/Exo2_0Thin.eot); 
  src: url(../fonts/Exo2_0Thin.eot) format('embedded-opentype'), url(../fonts/Exo2_0Thin.woff2) format('woff2'), url(../fonts/Exo2_0Thin.woff) format('woff'), url(../fonts/Exo2_0Thin.ttf) format('truetype'), url(../fonts/Exo2_0Thin.svg#Exo2_0Thin) format('svg'); 
  font-weight: 100; 
  font-style: normal 
} 
 
* { 
  box-sizing: border-box; 
  margin: 0; 
  padding: 0 
} 
 
body, 
html { 
  padding: 0; 
  margin: 0; 
  width: 100%; 
  height: 100% 
} 
 
body { 
  background: url(../img/cover.jpg); 
  -webkit-box-align: center; 
  align-items: center; 
  display: -webkit-box; 
  display: flex; 
  height: 100% 
} 
 
.container:before { 
  content: ''; 
  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); 
  background-image: linear-gradient(180deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); 
  display: block; 
  height: 50%; 
  left: 0; 
  position: fixed; 
  top: 0; 
  width: 100%; 
  z-index: -1 
} 
 
.container::after { 
  content: ''; 
  background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); 
  background-image: linear-gradient(360deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); 
  display: block; 
  height: 50%; 
  left: 0; 
  position: fixed; 
  bottom: 0; 
  width: 100%; 
  z-index: -1 
} 
 
.container { 
  margin: 0 auto; 
  text-align: center 
} 
 
.title { 
  margin-bottom: 27px; 
  font-family: 'Exo 2 Thin'; 
  font-size: 32px; 
  font-weight: 100; 
  font-style: normal; 
  color: #fff 
} 
 
.row { 
  display: -webkit-box; 
  display: flex; 
  -webkit-box-orient: horizontal; 
  -webkit-box-direction: normal; 
  flex-flow: row wrap; 
  -webkit-box-pack: center; 
  justify-content: center; 
  -webkit-box-align: center; 
  align-items: center; 
  text-align: center 
} 
 
.col { 
  margin-left: 40px; 
  margin-right: 40px; 
  position: relative; 
  max-height: 490px; 
  margin-bottom: 30px 
} 
 
.card-wrapper { 
  -webkit-box-pack: center; 
  justify-content: center; 
  -webkit-box-align: center; 
  align-items: center; 
  display: -webkit-box; 
  display: flex; 
  width: 320px; 
  border-radius: 10px; 
  background: -webkit-linear-gradient(315deg, transparent 31px, #1698d9 0); 
  background: linear-gradient(135deg, transparent 31px, #1698d9 0); 
  height: 490px 
} 
 
.card { 
  cursor: pointer; 
  width: 312px; 
  height: 480px; 
  position: relative; 
  display: block; 
  z-index: 1; 
  background: url(../img/card-bg.png) bottom left no-repeat, -webkit-linear-gradient(315deg, transparent 29px, #f2f2f2 0); 
  background: url(../img/card-bg.png) bottom left no-repeat, linear-gradient(135deg, transparent 29px, #f2f2f2 0); 
  text-align: left; 
  font-weight: 400; 
  border-radius: 10px; 
  color: #666 
}

<div class="card-wrapper"> 
  <div class="card"></div> 
</div>

Т.е по сути мы тот красный треугольник делаем прозрачным ...

Надеюсь я ответил ясно

Answer 2

Можно сделать очень просто)

Делаем диван округляем углы через border-radius, создаем градиент от угла через linear-gradient, что бы сделать рамочку делаем в нем такой же но поменьше

.one{ 
   width: 100px; 
   height:150px; 
   border-radius: 20px; 
   background: linear-gradient(135deg, transparent 35px, #FF69B4 0); 
   position: absolute ; 
} 
.two{ 
   width: 90px; 
   height:140px; 
   border-radius: 15px; 
   background: linear-gradient(135deg, transparent 33px, white 0); 
   position:absolute; 
   top: 5px; 
  left:5px; 
} 
.cat{ 
   background-color:red; 
   width: 70px; 
   height:70px; 
   position:absolute; 
   top: 75px; 
   left:-5px; 
   border-radius: 0 0 0 20px; 
}

<div class="one"> 
<div class="two"> 
<img class="cat" src="https://www.meme-arsenal.com/memes/d5054013f48d02a72a054bae89a15992.jpg" > 
</div> 
</div>