Есть блок с фоновым градиентом, внутри него блок со скошенными углами. Как можно сверстать этот блок, а именно углы? Clip-path не подходит, так как бордер у углов обрезается. Обертки всякие с фоном тоже не подходят, так как на фоне градиент
2 ответа
Вариант 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>
-
Во втором варианте даже и
clip-path
лишний, если используются градиенты.– UModeL24 мар 2021 в 6:24 -
Паша салам - а ты можешь весь текст расположить таким способом как в примере ? 24 мар 2021 в 14:23
-
-
Вариант с 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">Инвентаризационная компания «ревизор»</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>