svg 180 draaien zonder gebruik te maken van transform
weet iemand wat ik bij de onderstaande htmlcode moet aanpassen zodat de svg 180 vertikaal wordt gedraaid.
Nu is de rechte lijn beneden, maar die zou dus boven moeten komen. echter ik wil dit dus voor elkaar krijgen zonder gebruik te maken van transform. heb weinig kennis van svg/path namelijk.
Hartelijk dank.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<style>
.custom-shape-divider-top-1708357252 {
/* position: absolute; */
top: 0;
left: 0;
width: 100%;
overflow: hidden;
line-height: 0;
}
.custom-shape-divider-top-1708357252 svg {
/* position: relative; */
display: block;
width: calc(100% + 1.3px);
/* height: 101px; */
}
.custom-shape-divider-top-1708357252 .shape-fill {
fill: var(--fillsvg);
}
</style>
<div id="spiegeltopdivider_2727" class="custom-shape-divider-top-1708357252">
<svg id="hoogtetopdivider_2727" style="height: 100px" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
<path id="mijntopdivider_2727" style="--fillsvg: #897CA1;" d="M598.97 114.72L0 0 0 120 1200 120 1200 0 598.97 114.72z" class="shape-fill"></path>
</svg>
</div>
.custom-shape-divider-top-1708357252 {
/* position: absolute; */
top: 0;
left: 0;
width: 100%;
overflow: hidden;
line-height: 0;
}
.custom-shape-divider-top-1708357252 svg {
/* position: relative; */
display: block;
width: calc(100% + 1.3px);
/* height: 101px; */
}
.custom-shape-divider-top-1708357252 .shape-fill {
fill: var(--fillsvg);
}
</style>
<div id="spiegeltopdivider_2727" class="custom-shape-divider-top-1708357252">
<svg id="hoogtetopdivider_2727" style="height: 100px" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
<path id="mijntopdivider_2727" style="--fillsvg: #897CA1;" d="M598.97 114.72L0 0 0 120 1200 120 1200 0 598.97 114.72z" class="shape-fill"></path>
</svg>
</div>
Er is geen andere optie in CSS om te roteren, en je moet het niet willen. CSS transforms worden achteraf door de GPU gedaan. Als je gaat zitten prutsen in de marge wordt niemand daar blij van, niet in de laatste plaats een toekomstige developer die het CMS moet onderhouden en/of doorontwikkelen.
En wie leest er nou commentaar...
Gewijzigd op 09/08/2024 12:20:49 door Paul Weiss