то, что я хочу сделать, это добиться изображения с помощью css, но я не смог добиться именно того, чего хочу. Заранее спасибо за помощь в том, как это сделать.
.alt {
color: white;
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 130px;
background-color: #d2151e;
}
.alt:before {
content: ' ';
background: none;
display: block;
height: 0;
position: absolute;
width: 0;
top: 0;
left: 50%;
z-index: 99;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #ffffff;
}
.alt:after {
content: '';
}
<div class = "alt flex">
<div class = "flex w-full h-full item-center">
<div style = "width: 40%">
</div>
</div>
<div class = "logo">
</div>
</div>
как рисовать свг
Вы можете использовать бесплатную программу Inkscape, или figma, или один из многих веб-редакторов SVG.
у меня нет навыков рисования
Вот что вы можете сделать с помощью css
.alt {
color: white;
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 130px;
background-color: #d2151e;
}
.alt:before {
content: ' ';
background: none;
display: block;
height: 0;
position: absolute;
width: 0;
top: 0;
left: 32%;
z-index: 99;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #ffffff;
}
.alt:after {
content: '';
}
.logo {
background: #f0f0f0;
width: 40%;
height: 160px;
position: absolute;
right: -100px;
box-shadow: -2px 1px 4px #757575c9;
top: -30px;
border-radius: 15px 0 0 0;
-webkit-transform: skew(-45deg);
-moz-transform: skew(-45deg);
-ms-transform: skew(-45deg);
transform: skew(-45deg);
overflow: hidden;
}
и html есть
<div class = "alt flex">
<div class = "flex w-full h-full item-center">
<div style = "width: 40%">
</div>
</div>
<div class = "logo">
</div>
Что-то подобное ?
:root {
--card-width: 200px;
}
.container {
position: relative;
background-color: #E01D2B;
height: 180px;
width: 600px;
margin: auto;
overflow: hidden;
}
.arrow {
height: 100px;
width: 100%;
background-color: white;
display: flex;
justify-content: center;
align-items: flex-end;
}
.arrow::after {
display: block;
background-color: white;
width: 20px;
height: 20px;
bottom: 0;
content: '';
transform: translate(calc(var(--card-width) / -2), 50%) rotate(45deg);
}
.card {
display: block;
position: absolute;
bottom: 0;
right: 0;
width: calc(var(--card-width) + 40px);
height: 110px;
border-top-left-radius: 1em;
background-color: #eee;
transform: translate(34px) skewX(-30deg);
}
<div class = "container">
<div class = "arrow"></div>
<div class = "card"></div>
</div>
Вы действительно должны использовать svg для этого