2

Надо добиться такого результата: https://prnt.sc/z3q7ti

Накидал такой код:

.box {
  width: 100%;
  height: 300px;
  background-color: red;
  position: relative;
  
}

.title {
  width: 50%;
  height: 150px;
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: blue;
  color: #fff;
  padding: 50px 50px 50px 150px;
  box-sizing: border-box;
  font-size: 28px;
  clip-path: polygon(10% 0, 100% 0%, 100% 100%, 0 100%);
}
<div class="box">
  <div class="title">
    Lorem ipsum dolor.
  </div>
</div>

Мне нужно только рамка, остальное сделаю

1
  • Ну почему картинка то на "левом" хостинге? Её же можно сразу в вопрос вставить.
    – UModeL
    11 фев 2021 в 14:52

2 ответа 2

3

Если я правильно понимаю поставленную задачу по картинке, то например можно это сделать так:

.box {
  width: 100%;
  height: 300px;
  background-color: red;
  position: relative;
}

.title {
  width: 50%;
  height: 150px;
  position: absolute;
  bottom: 0;
  right: 0;
  color: #fff;
  padding: 50px 50px 50px 150px;
  box-sizing: border-box;
  font-size: 28px;
  clip-path: polygon(10% 0, 100% 0%, 100% 100%, 0 100%);
  background: linear-gradient(90deg, white 0%, transparent 70%);
}

.title:before {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
  width: calc(100% - 3px);
  height: calc(100% - 3px);
  background-color: blue;
  clip-path: polygon(10% 0, 100% 0%, 100% 100%, 0 100%);
}

.title>div {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 80%;
  height: 90%;
}
<div class="box">
  <div class="title">
    <div>Lorem ipsum dolor.</div>
  </div>
</div>

3

Не вижу смысла использовать clip-path, достаточно обычного transform: skew();.

Самый хитрый элемент здесь - это верхняя граница, которая растворяется с помощью радиального градиента, и потому, имеет необычную форму.

body { margin: 0; }

.box {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  height: 300px;
  width: 100%;
  overflow: hidden;
  background-image: url('https://i.stack.imgur.com/m9kuJ.jpg');
  background-size: cover;
  background-position: center;
}

.title {
  position: relative;
  z-index: 0;
  height: 150px;
  width: calc(100% - 130px);
  padding: 50px 50px 50px 150px;
  box-sizing: border-box;
  font-size: 28px;
  color: #fff;
}
.title::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 0;
  z-index: -1;
  height: calc(100% + 8px);
  width: calc(110% + 100px);
  transform-origin: top left;
  transform: skewx(326deg);
  background-image: radial-gradient( farthest-side at 0% 0%, #ffff 30%, #fff0 45%), linear-gradient(#ffff, #ffff), linear-gradient(#88f8, #88f8);
  background-position: 0% 0px, 0% 0%, 10px 8px;
  background-size: 75% 7px, 3px 100%, 100% 100%;
  background-repeat: no-repeat;
}
<div class="box">
  <div class="title">
    Lorem ipsum dolor.
  </div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.