3

введите сюда описание изображения

Есть блок с фоновым градиентом, внутри него блок со скошенными углами. Как можно сверстать этот блок, а именно углы? Clip-path не подходит, так как бордер у углов обрезается. Обертки всякие с фоном тоже не подходят, так как на фоне градиент

1

2 ответа 2

7

Вариант 1. Псевдоэлементы ::before и ::after

body {background: linear-gradient(90deg, green, blue); padding: 20px;}

div { display: flex; justify-content: center; align-items: center;
  position: relative; width: 400px; height: 100px;
  background: linear-gradient( 45deg, transparent 25px, red 25px, red 28px, transparent 28px, transparent calc(100% - 28px), red calc(100% - 28px), red calc(100% - 25px), transparent calc(100% - 25px), transparent 100%);
}

div::before, div::after {content: ""; position: absolute; width: 360px; height: 60px;}
div::before {top: 0; left: 0; border-top: 3px solid red; border-left: 3px solid red;}
div::after {bottom: 0; right: 0; border-bottom: 3px solid red; border-right: 3px solid red;}

span {color: white; font-size: 35px; font-family: sans-serif;}
<div><span>Какой-то текст</span></div>

Вариант 2. Только на градиентах

body {background: linear-gradient(90deg, green, blue); padding: 20px;}

div { display: flex; justify-content: center; align-items: center;
  position: relative; width: 400px; height: 100px;
  background:
   linear-gradient( 180deg, red, red 3px, transparent 4px, transparent 100%),
   linear-gradient( 0deg, red, red 3px, transparent 4px, transparent 100%),
   linear-gradient( 90deg, red, red 3px, transparent 4px, transparent 100%),
   linear-gradient( 270deg, red, red 3px, transparent 4px, transparent 100%),
   linear-gradient( 45deg, transparent 25px, red 25px, red 28px, transparent 28px, transparent calc(100% - 28px), red calc(100% - 28px), red calc(100% - 25px), transparent calc(100% - 25px), transparent 100%);
   
   background-size: calc(100% - 36px) 100%, calc(100% - 36px) 100%, 100% calc(100% - 36px), 100% calc(100% - 36px), 100% 100%;
   background-position: 0 0, 36px 0, 0 0, 0 36px, 0 0;
   background-repeat: no-repeat;
}

span {color: white; font-size: 35px; font-family: sans-serif;}
<div><span>Какой-то текст</span></div>

Вариант 3. Кто сказал, что clip-path не подходит?

body {background: linear-gradient(90deg, green, blue); padding: 20px;}

div { display: flex; justify-content: center; align-items: center;
  position: relative; width: 400px; height: 100px;
  border: 3px solid red;
  background: linear-gradient( 45deg, transparent 25px, red 25px, red 28px, transparent 28px, transparent calc(100% - 28px), red calc(100% - 28px), red calc(100% - 25px), transparent calc(100% - 25px), transparent 100%);
  
  clip-path: polygon(0 0, calc(100% - 41px) 0, 100% calc(100% - 64px), 100% 100%, 41px 100%, 0 calc(100% - 41px));
}

span {color: white; font-size: 35px; font-family: sans-serif;}
<div><span>Какой-то текст</span></div>

4
  • Во втором варианте даже и clip-path лишний, если используются градиенты.
    – UModeL
    24 мар 2021 в 6:24
  • Паша салам - а ты можешь весь текст расположить таким способом как в примере ? 24 мар 2021 в 14:23
  • ни в чём.... очевидно автор не получил ответ 24 мар 2021 в 15:10
  • А как сделать анологично со всех сторон? 19 мар в 17:08
1

Вариант с SVG

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

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;600&display=swap');
* {
  margin: 0;
  text-decoration: none;
}

.header {
  padding: 30px 30px;
  background: linear-gradient(-30deg, rgba(0, 0, 0, 0.8), rgba(200, 200, 200, 0.6), rgba(0, 0, 0, 0.8)), linear-gradient(-30deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9));
}

svg {
  width: 560px;
}

svg path {
  fill: none;
  stroke: blue;
  stroke-width: 1;
}

svg text {
  text-anchor: baseline;
  dominant-baseline: center;
  fill: #fff;
  text-transform: uppercase;
  font-family: 'Open Sans', sans-serif;
}

svg text:nth-of-type(1) {
  font-size: 20px;
  font-weight: 600;
}

svg text:nth-of-type(2) {
  font-size: 16px;
}

foreignObject {
  color: #fff;
  font-size: 16px;
}

line {
  stroke: blue;
  stroke-width: 1.2;
}

.button {
  margin-top: 20px;
}

.button,
.footer {
  margin-left: 30px;
}

.button a {
  background: #362BBB;
  color: #fff;
  font-size: 16px;
  padding: 6px 12px;
  border-radius: 4px;
}

.flex {
  display: grid;
  grid-template-columns: 120px 120px 120px 100px;
  align-items: center;
  color: #fff;
}

.flex-item span {
  font-size: 10px;
}

#map img {
  display: block;
  height: 40px;
  margin: auto;
  filter: invert(100%);
}
<div class="header">
  <div class="svg">
    <svg viewBox="0 0 600 210" xmlns="http://www.w3.org/2000/svg">
      <path d="M0,0 570,0 600,30 600,210 30,210 0,180z" />
      <text x="30" y="50">Доверьте инвентаризацию профессионалам</text>
      <text x="30" y="80">Инвентаризационная компания &#171;ревизор&#187;</text>
      <foreignObject x="30" y="120" width="550" height="150">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam enim ad ducimus, quaerat rem quisquam ipsam fugiat eligendi tenetur corrupti esse hic non voluptatem minus, consequatur atque! Eaque accusamus.
      </foreignObject>
      <line x1="350" x2="560" y1="57" y2="57" />
    </svg>
  </div>
  <div class="footer">
    <div class="flex">
      <div class="flex-item">
        <p>10 лет</p>
        <span>Lorem ipsum dolor sit amet.</span>
      </div>
      <div class="flex-item">
        <p>15 000</p>
        <span>Lorem ipsum dolor sit amet.</span>
      </div>
      <div class="flex-item">
        <p>
          <5000</p>
            <span>Lorem ipsum dolor sit amet.</span>
      </div>
      <div class="flex-item">
        <div id="map">
          <img src="https://i.ibb.co/7pFVnJB/russia.png" alt="">
          <span>Lorem ipsum dolor sit amet.</span>
        </div>
      </div>
    </div>
  </div>
  <div class="button">
    <a href="#">Узнать стоимость</a>
  </div>
</div>

0

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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