Robert0001
Lt. Junior Grade
- Registriert
- Dez. 2017
- Beiträge
- 452
.halfsquare {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
color: #000;
padding: 1rem 0;
}
.halfsquare::before {
position: absolute;
content: "";
width: 100%;
background-position: center center;
background-repeat: no-repeat;
background-image: url(../img/roses.webp);
}
.halfsquare-left {
padding: 8rem;
-webkit-clip-path: polygon(
0% 20%,
80% 20%,
80% 0%,
100% 50%,
80% 100%,
80% 80%,
0% 80%
);
clip-path: polygon(
0% 20%,
80% 20%,
80% 0%,
100% 50%,
80% 100%,
80% 80%,
0% 80%
);
background-color: lightgreen;
}
<section class="bg-black-banner">
<div class="halfsquare">
<div class="halfsquare-left">
<h3>Sie suchen nach einem professionellen Webdesign?</h3>
</div>
<div class="halfsquare-right">
<p>listen to your empathie</p>
</div>
<div>
</section>
bitte hilfe? das bild soltlte sich im hintergrund darstellen , den verlauf mach ich dann..
denk ich falsch? oder was ist los? wenn jemand mein prob versteht, würd ich mich über antwort freuen..
Ergänzung ()
Ergänzung ()
ich weiss.. es dürfte eigentlich lächerlich sein.. mit einem grid einfach zu lösen oder mit display flex ..
ich möchte einen coolen banner erstellen.. und häng voll mit dem design usw.
also bitte keine vorurteile..
Ergänzung ()
ich glaub ich werd den schwarzen hintergrund wegmachen
Ergänzung ()
ps. ich habs ..aber bin gespannt auf eure ergebnisse
Zuletzt bearbeitet: