expertenaustausch > comm.* > comm.infosystems.www.authoring.misc

Andreas Borutta (24.02.2018, 13:22)
Moin.

Ich möchte möglichst elegant eine Trapezform einer Box realisieren.

In anderen Worten: eine abgeschnittenen Ecke.

Schemaskizze:

|\ /|
| \ / |
| \ / |
| \ / |
| \ / |
|Text \ / |
| || Bild |
| || |
+------++------+

Ginge es um eine abgerundete Ecke, wäre es ein CSS-Einzeiler.

Die meisten Autoren verwenden Hintergrundbilder um den Effekt zu
erzielen.

Lea Veroux beschreibt auf

eine Technik, die allein mit CSS auskommt.

Ich finde sie ganz schön aufwändig.

Kennt ihr eine bessere Technik?

Würdet ihr sowas per SVG lösen? Oder ist es nach wie vor die
Unterstützung auf den mobilen Plattformen zu gering?

Anmerkung:

Es geht um die Gestaltung eines Kopfbereiches, der aus zwei
nebeneinanderstehenden Trapezformen besteht.
Das linke Trapez wird Text enthalten.
Das rechte ein Bild.

Das Trapez mit dem Text soll eine feste Breite in em behalten. Das
Trapez mit dem Bild soll sich in der Breite anpassen.

Über euren Rat freue ich mich. Danke.

Andreas
Thomas 'PointedEars' Lahn (24.02.2018, 21:17)
Andreas Borutta wrote:

> Ich möchte möglichst elegant eine Trapezform einer Box realisieren.


Warum? Wer soll das lesen können?

[..]
> Ginge es um eine abgerundete Ecke, wäre es ein CSS-Einzeiler.
> Die meisten Autoren verwenden Hintergrundbilder um den Effekt zu
> erzielen.


Ja, das musst aber gut konzeptioniert werden. Beispielsweise ist es ein
Fehler, hier nur *ein* Hintergrundbild zu verwenden, da dieses nicht mit dem
Text mitwächst. BTDT.

Die Frage ist, was mit dem Text passieren soll. Falls er in das linke
Trapez passen muss, solltest Du dir CSS Shapes Module Level 1 (CR)
anschauen.

> Lea Veroux beschreibt auf


_Verou_. Griechisch, nicht französisch.

>


Nice.

> eine Technik, die allein mit CSS auskommt.
> Ich finde sie ganz schön aufwändig.


Sie eignet sich hier IMHO nicht, weil Dein Textcontainer sehr spitzwinklig
ist.

> Kennt ihr eine bessere Technik?


Ja.

> Würdet ihr sowas per SVG lösen?


Nein, denn die Form ist lediglich ein Nice-to-have.

> Oder ist es nach wie vor die Unterstützung auf den mobilen Plattformen
> zu gering?


Die Unterstützung von SVG ist auf Mobiles eher *besser* als auf Desktops,
weil inzwischen die meisten Mobile-Browser auf WebKit basieren und HTML5
unterstützen (in dessen HTML-Syntax man SVG-Markup einbetten darf).

Siehe auch: <https://caniuse.com/#feat=svg>

PointedEars
Andreas Borutta (25.02.2018, 08:35)
Thomas 'PointedEars' Lahn schrieb:

> Andreas Borutta wrote:
>> Ich möchte möglichst elegant eine Trapezform einer Box realisieren.

> Warum? Wer soll das lesen können?


Es ist nur ein Schemaskizze. Im linken Trapez soll sich ein Textlogo
befinden.
Die Entwürfe stammen von einer Designerin.
Ich selber neige der Schlichtheit zu, finde aber das Gestaltungsmittel
Trapezform schön. Es soll halt kein Einerlei sein.

Die Trapeze sind "in echt" auch nicht spitz- sondern flachwinkelig.
Der Winkel ist verschieden.

> Ja, das musst aber gut konzeptioniert werden. Beispielsweise ist es ein
> Fehler, hier nur *ein* Hintergrundbild zu verwenden, da dieses nicht mit dem
> Text mitwächst. BTDT.


Das Textlogo wird als Hintergrund kein Bild enthalten, sondern nur
eine Hintergrundfarbe.

> Die Frage ist, was mit dem Text passieren soll. Falls er in das linke
> Trapez passen muss, solltest Du dir CSS Shapes Module Level 1 (CR)
> anschauen.
>> Lea Veroux beschreibt auf

> _Verou_. Griechisch, nicht französisch.


Oh, Danke! Verzeihung bitte an die Autorin.

>>

> Nice.


Die Frau schreibt auch sonst großartig über CSS. Zum Beispiel ihr Buch
"Typische Webdesign-Probleme klug gelöst" ist sehr empfehlenswert.

ISBN Print: 978-3-96009-025-0

Nebenbei fand ich es spannend, dass die Print-Ausgabe komplett über
HTML/CSS erstellt wurde.


>> eine Technik, die allein mit CSS auskommt.
>> Ich finde sie ganz schön aufwändig.

> Sie eignet sich hier IMHO nicht, weil Dein Textcontainer sehr spitzwinklig
> ist.
>> Kennt ihr eine bessere Technik?

> Ja.


Möchtest Du hier darüber berichten? Ich würde mich freuen.

Andreas
Maik Koenig (25.02.2018, 12:08)
Am 24.02.2018 um 12:22 schrieb Andreas Borutta:
> Moin.
> Ich möchte möglichst elegant eine Trapezform einer Box realisieren.
> Kennt ihr eine bessere Technik?


Dies hier:



?

Greetz,
MK
Andreas Borutta (25.02.2018, 15:29)
Maik Koenig schrieb:

> Am 24.02.2018 um 12:22 schrieb Andreas Borutta:
>> Moin.
>> Ich möchte möglichst elegant eine Trapezform einer Box realisieren.
>> Kennt ihr eine bessere Technik?

> Dies hier:
>


Herzlichen Dank!

Ich habe das Beispiel für meine Aufgabe angepasst.



Auch das von Dir verwendete jsfiddle.net:
Superpraktisch um sich über HTML/CSS auszutauschen. Danke auch dafür.

Testen muss ich noch die Skalierbarkeit des Verfahrens, wenn also im
Viewport nicht mehr genug Platz für für die volle Breite vorhanden
ist.

Andreas
Thomas 'PointedEars' Lahn (25.02.2018, 17:53)
?Andreas Borutta, Berlin? schrieb am Sonntag um 07:35 Uhr:
^^^^^^ ^^^^^^^^^^^^^^^^^^^^^^^
Auch Eishockey gekuckt? :)

> Thomas 'PointedEars' Lahn schrieb:
> Es ist nur ein Schemaskizze. Im linken Trapez soll sich ein Textlogo
> befinden.
> Die Entwürfe stammen von einer Designerin.
> Ich selber neige der Schlichtheit zu, finde aber das Gestaltungsmittel
> Trapezform schön. Es soll halt kein Einerlei sein.
> Die Trapeze sind "in echt" auch nicht spitz- sondern flachwinkelig.


?Flachwink(e)lig? gibt es nicht. Vermutlich meinst Du _liegend statt
stehend spitzwinklig_, d. h. die Breite der Trapeze ist grösser als ihre
Höhe:

:-._
: '-._
: '-._
: Text :
:___________:

> Der Winkel ist verschieden.


Ohne Details ist es schwierig, einen guten Rat zu geben. Bei
unterschiedlichen Winkeln soll sich der Text aber wahrscheinlich der Form
komplett anpassen, somit wäre im allgemeinen CSS Shapes+Masking die beste
Lösung.

> Das Textlogo wird als Hintergrund kein Bild enthalten, sondern nur
> eine Hintergrundfarbe.


OK, das hättest Du dazuschreiben sollen.

>> Die Frage ist, was mit dem Text passieren soll.


Nun?

>> Falls er in das linke Trapez passen muss, solltest Du dir CSS Shapes ^^^^^^^^^^
>> Module Level 1 (CR) anschauen. ^^^^^^^^^^^^^^^^^^^


>>> http://lea.verou.me/2011/03/beveled-corners-negative-border-radius-with->>> css3-gradients/

>> Nice.

> Die Frau schreibt auch sonst großartig über CSS. [?]


Sie hat viele Ideen. Einige davon finde ich gut; viele eher fragwürdig bis
schlecht, weil nicht zuende gedacht.

> [?]
> Die Trapeze sind "in echt" auch nicht spitz- sondern flachwinkelig.
> Der Winkel ist verschieden.


Dann könnte sie hier sinnvoll sein, denn der Text soll wahrscheinlich nicht
innerhalb des rechtwinkligen Dreiecks, das durch die Diagonale begrenzt ist,
dargestellt werden. Somit liesse sich das mit einem linearen Verlauf für
den Hintergrund und entsprechend Padding lösen.

>>> Kennt ihr eine bessere Technik?

>> Ja.

> Möchtest Du hier darüber berichten? Ich würde mich freuen.


Hab? ich schon, siehe Markierung oben :)

Siehe auch <https://www.sarasoueidan.com/blog/css-shapes/>. [Das Beispiel
mit dem Eiffelturm funktioniert auch auf der rechten Seite des Textes immer
noch, wenn man für das Bild des Turms (?.shaped?) bei der ?shape-outside?-
Eigenschaft denselben Wert wie bei der ?-webkit-clip-path?-Eigenschaft
angibt. Statt ?-webkit-clip-path? kann und sollte man jetzt ?clip-path?
verwenden (die Syntax für den Wert ist dieselbe).]

Falls die Breite in absoluten Grössen definiert ist, könnte man auch
das rechtwinklige Dreieck im Trapez mit dem border-Trick generieren:

<div style="
width: 0;
height: 0;
border-top: 1em solid transparent;
border-left: 10em solid red;
"></div>
<div style="
background-color: red;
color: white;
width: 10em;
">blubb dasd asd asd asda sd asd asdaasd</div>

Siehe auch <https://css-tricks.com/examples/ShapesOfCSS/>.

Ich erinnere mich noch dunkel an ein Beispiel im alten WebKit-Blog (?Surfin?
Safari?¹), wo sich Text in eine anscheinend nicht-rechtwinklige Box (der
rechte Rand hatte Kurven) einfügte; leider waren meine Ausgrabungen im
Internet Archive (sic) bisher nicht erfolgreich². Möglicherweise wurde da
aber auch eine frühe Implementierung von dem jetzigen CSS Shapes Level 1 und
CSS Masking Level 1 verwendet; leider wird ?shape-inside? von WebKit nicht
mehr unterstützt.

PointedEars
___________
¹ <http://web.archive.org/web/20180215170016/https://webkit.org/blog/>
vs. <https://webkit.org/blog/>

² Leute, wenn ihr ein Blog habt, dann baut eine *Volltextsuche* ein!
Maik Koenig (25.02.2018, 18:33)
Am 25.02.2018 um 14:29 schrieb Andreas Borutta:
> Maik Koenig schrieb:
> Herzlichen Dank!


Gern geschehen. Ich bin aber nicht der Erbauer, habe es selbst bloss
gefunden.

> Ich habe das Beispiel für meine Aufgabe angepasst.
>
> Auch das von Dir verwendete jsfiddle.net:
> Superpraktisch um sich über HTML/CSS auszutauschen. Danke auch dafür.


Da bevorzuge ich eigentlich stackoverflow.com.

Greetz,
MK
Andreas Borutta (25.02.2018, 20:50)
Maik Koenig schrieb:

>> Auch das von Dir verwendete jsfiddle.net:
>> Superpraktisch um sich über HTML/CSS auszutauschen. Danke auch dafür.

> Da bevorzuge ich eigentlich stackoverflow.com.


Ich meinte den Austausch von Code.
Es ging mir um den Online-Editor, wo sich sogar ohne Konto ein
Abkömmling eines Codebeispiels per URL weitergeben lässt.

Andreas
Andreas Borutta (25.02.2018, 22:42)
Thomas 'PointedEars' Lahn schrieb:

> „Andreas Borutta, Berlin“ schrieb am Sonntag um 07:35 Uhr:
> ^^^^^^ ^^^^^^^^^^^^^^^^^^^^^^^
> Auch Eishockey gekuckt? :)


War nur früh wach :) Leider sind die Seen hier noch nicht ausreichend
zugefroren, dann wäre Eislaufen um diese Zeit perfekt gewesen.
Zu zweit, mit einem großen Betttuch als Segel, habe ich das vor
einigen Jahren mal zum Sonnenaufgang auf dem Müggelsee gemacht. Wir
haben schnell gerefft, weil wir Schiß bekamen ob der enormen
Geschwindigkeit beim "Eissegeln".

[..]
> unterschiedlichen Winkeln soll sich der Text aber wahrscheinlich der Form
> komplett anpassen, somit wäre im allgemeinen CSS Shapes+Masking die beste
> Lösung.


Breite: 17em
Höhe rechts: 24em
Höhe links: 25em

Der Text soll sich der Form nicht anpassen. Ich hätte das explizit
erwähnen sollen.

>> Das Textlogo wird als Hintergrund kein Bild enthalten, sondern nur
>> eine Hintergrundfarbe.

> OK, das hättest Du dazuschreiben sollen.


Stimmt. Meine Beschreibung war wirklich zu knapp.

>>>> http://lea.verou.me/2011/03/beveled-corners-negative-border-radius-with->>> css3-gradients/
>>> Nice.

>> Die Frau schreibt auch sonst großartig über CSS. […]

> Sie hat viele Ideen. Einige davon finde ich gut; viele eher fragwürdig bis
> schlecht, weil nicht zuende gedacht.


OK.
Das hätte ich nicht erwartet, wo sie eine der wenigen vom W3C
eingeladenen Experten war.
Und zudem im Vorwort von Eric A. Meyer außerordentliche Anerkennung
erhält.

Deine Kritik würde mich näher interessieren - in einem eigenen Thread.
Muss ja nicht bald sein. Falls Du zu sowas mal Lust hast ...

>> […]
>> Die Trapeze sind "in echt" auch nicht spitz- sondern flachwinkelig.
>> Der Winkel ist verschieden.

> Dann könnte sie hier sinnvoll sein, denn der Text soll wahrscheinlich nicht
> innerhalb des rechtwinkligen Dreiecks, das durch die Diagonale begrenzt ist,
> dargestellt werden.


Richtig. Der Text wird nur unterhalb des rechtwinkligen Dreiecks
dargestellt.

> Somit liesse sich das mit einem linearen Verlauf für
> den Hintergrund und entsprechend Padding lösen.


Hätte das denn Vorteile gegenüber der von Maik hier im Thread
verlinkten Technik?

Siehe mein Beispielcode dazu:


>>>> Kennt ihr eine bessere Technik?
>>> Ja.

>> Möchtest Du hier darüber berichten? Ich würde mich freuen.

> Hab’ ich schon, siehe Markierung oben :)
> Siehe auch <https://www.sarasoueidan.com/blog/css-shapes/>.


Danke. Das ist zwar für das Projekt, um welches es in diesem Thread
geht, nicht wichtig, aber das Thema "shaping" ist interessant.

[..]
> color: white;
> width: 10em;
> ">blubb dasd asd asd asda sd asd asdaasd</div>


:) Entspricht fast genau meinem Code in der Antwort auf Maiks Hinweis.

> Siehe auch <https://css-tricks.com/examples/ShapesOfCSS/>.


Sehr gut gemachte Übersicht. Danke.

Macht Spaß nach Jahren der Abstinenz sich langsam wieder in
CSS-Feinheiten einzuarbeiten.

> ² Leute, wenn ihr ein Blog habt, dann baut eine *Volltextsuche* ein!


+1

Andreas
Thomas 'PointedEars' Lahn (26.02.2018, 01:07)
Andreas Borutta wrote:

> Thomas 'PointedEars' Lahn schrieb:
> War nur früh wach :) Leider sind die Seen hier noch nicht ausreichend
> zugefroren, dann wäre Eislaufen um diese Zeit perfekt gewesen.
> Zu zweit, mit einem großen Betttuch als Segel, habe ich das vor
> einigen Jahren mal zum Sonnenaufgang auf dem Müggelsee gemacht. Wir
> haben schnell gerefft, weil wir Schiß bekamen ob der enormen
> Geschwindigkeit beim "Eissegeln".


Ahja :) Ich bezog mich damit auf das Goldmedaillen-Spiel der deutschen
_Eishockey_-Olympiamannschaft. Da ist ja auch einer von den *Berliner*
?Eisbären? dabei. (Jheqr wn qnaa "ahe" Fvyore, nore gbyyr
Znaafpunsgfyrvfghat.)

> OK.
> Das hätte ich nicht erwartet, wo sie eine der wenigen vom W3C
> eingeladenen Experten war.
> Und zudem im Vorwort von Eric A. Meyer außerordentliche Anerkennung
> erhält.


Sie macht halt gutes Marketing: Website, ab und zu mal ein Tool, Vorträge
und jetzt auch noch Bücher ? ich nehme sie nur am Rande wahr.

Ich bin aus Erfahrung immer sehr skeptisch gegenüber Leuten, die mehr über
Dinge sagen/schreiben als dass sie diese Dinge tun. Es gibt gerade im Web-
Bereich viele selbsternannte Experten, deren professionelle Erfahrung sich
auf ihre Experimentierfreudigkeit und ihren Geschäftssinn beschränkt. Von
Anfängern werden sie geradezu angebetet, und ihre Meinungen werden von
diesen unreflektiert wie das Evangelium hergebetet ? aber oft steckt dann
bei beiden fachlich nicht viel dahinter. Das halte ich für ein grosses
Problem, denn es befördert und fördert eine Diskussionskultur, bei der
derjenige als Gewinner zählt, der am lautesten schreit ? nicht der mit den
besseren Argumenten. Das beste schlechte Beispiel dafür ist die WHATWG,
und man sieht es IMHO auch am Niedergang von Mozilla.

> Deine Kritik würde mich näher interessieren - in einem eigenen Thread.
> Muss ja nicht bald sein. Falls Du zu sowas mal Lust hast ...


Wenn ich einen konkreten Anlass dazu habe, gern. Sonst habe ich wirklich
Besseres zu tun.

>> Somit liesse sich das mit einem linearen Verlauf für
>> den Hintergrund und entsprechend Padding lösen.

> Hätte das denn Vorteile gegenüber der von Maik hier im Thread
> verlinkten Technik?


Ja.

PointedEars
Thomas 'PointedEars' Lahn (26.02.2018, 01:14)
Andreas Borutta wrote:

> Maik Koenig schrieb:
>>> Auch das von Dir verwendete jsfiddle.net:
>>> Superpraktisch um sich über HTML/CSS auszutauschen. Danke auch dafür.

>> Da bevorzuge ich eigentlich stackoverflow.com.


JFTR: Stack Overflow ist *kein* Webforum, sondern eine Frage-und-Antwort
(Q&A)-Site. Auf Stack Overflow in Kommentaren zu diskutieren, ist
*Missbrauch* von Stack Overflow (und anderen StackExchange-Plattformen).

> Ich meinte den Austausch von Code.
> Es ging mir um den Online-Editor, wo sich sogar ohne Konto ein
> Abkömmling eines Codebeispiels per URL weitergeben lässt.


JSFiddles kann man neuerdings auch in Stack-Overflow-Fragen und-Antworten
integrieren.

Alternativ (und von mir bevorzugt): <https://codepen.io/>

PointedEars
Maik Koenig (26.02.2018, 05:55)
Am 26.02.2018 um 00:14 schrieb Thomas 'PointedEars' Lahn:
> Andreas Borutta wrote:
> JFTR: Stack Overflow ist *kein* Webforum, sondern eine Frage-und-Antwort
> (Q&A)-Site.


<Loriot> Ach </Loriot>

> Auf Stack Overflow in Kommentaren zu diskutieren, ist
> *Missbrauch* von Stack Overflow (und anderen StackExchange-Plattformen).


<Loriot> Ach </Loriot>

Greetz,
MK
Andreas Borutta (26.02.2018, 09:24)
Thomas 'PointedEars' Lahn schrieb:

> Sie macht halt gutes Marketing: Website, ab und zu mal ein Tool, Vorträge
> und jetzt auch noch Bücher – ich nehme sie nur am Rande wahr.
> Ich bin aus Erfahrung immer sehr skeptisch gegenüber Leuten, die mehr über
> Dinge sagen/schreiben als dass sie diese Dinge tun. Es gibt gerade im Web-
> Bereich viele selbsternannte Experten, deren professionelle Erfahrung sich
> auf ihre Experimentierfreudigkeit und ihren Geschäftssinn beschränkt. Von
> Anfängern werden sie geradezu angebetet, und ihre Meinungen werden von


Ich verstehe die Richtung Deiner Kritik.

Für Anbetung war ich noch nie anfällig. Ich mochte ihr Buch, den Stil
und den Aufbau. Mir fehlt, anders als Dir, der sicher sehr viel zum
Thema liest, weiß, über eine große eigene Erfahrung verfügt, der
Überblick über die aktuellen Entwicklungen und wichtige Akteure.

> diesen unreflektiert wie das Evangelium hergebetet – aber oft steckt dann
> bei beiden fachlich nicht viel dahinter. Das halte ich für ein grosses
> Problem, denn es befördert und fördert eine Diskussionskultur, bei der
> derjenige als Gewinner zählt, der am lautesten schreit – nicht der mit den
> besseren Argumenten. Das beste schlechte Beispiel dafür ist die WHATWG,
> und man sieht es IMHO auch am Niedergang von Mozilla.


Das Phänomen existiert, da stimme ich Dir zu. Aber besonders hier im
Usenet haben die besseren Argumente in meiner Wahrnehmung einen guten
Ort zur Entfaltung.

>> Deine Kritik würde mich näher interessieren - in einem eigenen Thread.
>> Muss ja nicht bald sein. Falls Du zu sowas mal Lust hast ...

> Wenn ich einen konkreten Anlass dazu habe, gern. Sonst habe ich wirklich
> Besseres zu tun.


Kann ich gut verstehen.

Hätte ja auch sein können, dass Du in einer anderen öffentlichen
Diskussion schonmal Vorgehensweisen von Frau Verou Paroli geboten auf
die sich verweisen ließe.

>>> Somit liesse sich das mit einem linearen Verlauf für
>>> den Hintergrund und entsprechend Padding lösen.

>> Hätte das denn Vorteile gegenüber der von Maik hier im Thread
>> verlinkten Technik?

> Ja.


Hast Du eventuell ein kurzes Codebeispiel?

Unschön am "Border-Trick" ist jedenfalls die Notwendigkeit ein leeres
Element hinzufügen zu müssen.

Vermutlich ist ein per CSS eingebettetes SVG-Hintergrundbild ebenfalls
eine schlanke und robuste Lösung. Man lagert mit so einer Technik eben
explizite geometrische Angaben aus, weil diese Angaben so in CSS zur
Zeit nicht möglich sind.

Beispiel (mit den Proportionen, die ich zuvor genannt hatte):

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg">
<polygon points="0,0 0,250 170,250 170,20 0,0" class="trapezoid"
fill="#F37021" />
</svg>

Die Pfade einfacher Polygone lassen sich sehr mühelos direkt von Hand
eintragen.*

Andreas

*Vektorgrafikprogrmamme als Hilfsmittel sind in solchen Fällen
unnötig. soweit ich weiß, existieren eh auch keine als freie Software,
die sauberen und vor allem prägnanten Code ausgeben - Inkscape macht
jedenfalls keinen Spaß.
Andreas Borutta (26.02.2018, 10:46)
Thomas 'PointedEars' Lahn schrieb:

>> Ich meinte den Austausch von Code.
>> Es ging mir um den Online-Editor, wo sich sogar ohne Konto ein
>> Abkömmling eines Codebeispiels per URL weitergeben lässt.

> JSFiddles kann man neuerdings auch in Stack-Overflow-Fragen und-Antworten
> integrieren.
> Alternativ (und von mir bevorzugt): <https://codepen.io/>


Wenn ich es richtig sehe, kann man bei codepen.io nur als
registrierter Nutzer ein "Projekt erzeugen" um eine URL weiterzugeben.

Und wenn ein Betrachter eines Projektes etwas daran verändert und
diesen veränderten Zustand als URL weitergeben möchte, geht das nicht,
ohne dass er sich ebenfalls registriert.
Ob bei einer solchen Veränderung der Bezug zum ursprünglichen Projekt
anhand des URL erkennbar bleibt, kann ich nicht sagen.

Aber vielleicht übersehe ich Vorteile von codepen.io gegenüber
jsfiddle.net?

jsfiddle.net kann bei

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg">
<polygon points="0,20 0,250 170,250 170,0 0,20" class="trapezoid"
fill="#F37021" />
</svg>

die Proportionen nicht korrekt darstellen. Vermutlich benötigt der
Dienst zwingend Angaben zum Viewport.



Andreas
Thomas 'PointedEars' Lahn (26.02.2018, 17:41)
Andreas Borutta wrote:

[Einleitungszeilen wiederhergestellt; bitte zukünftig stehenlassen]

> Thomas 'PointedEars' Lahn schrieb:
> Hast Du eventuell ein kurzes Codebeispiel?


Ja.

> Unschön am "Border-Trick" ist jedenfalls die Notwendigkeit ein leeres
> Element hinzufügen zu müssen.


Das ist nicht nötig, denn (wie so oft, siehe mein Seri-o-meter) mit einem
absolut positionierten :before (oder :after) geht es auch ohne zusätzliches
Markup:

/* LESS */
.foo {
position: relative;
width: @trapezoid-width;
background-color: @trapezoid-background-color;

&:before {
display: block;
position: absolute:
left: 0;
top: -1em;
right: 0;
height: 1em;
border-right-width: @trapezoid-width;
border-bottom-width: 1em;
border-color: @trapezoid-background-color;
content: "";
}
}

Ein wesentlicher Nachteil des border-Tricks sind aber wie gesagt die
absoluten Dimensionen. Ein Trapez wird es hier zum Beispiel nur, wenn das
Container-Element und das Border-Element gleich breit sind und auch die
?border-right-width? dem entspricht.

> Vermutlich ist ein per CSS eingebettetes SVG-Hintergrundbild ebenfalls
> eine schlanke und robuste Lösung. Man lagert mit so einer Technik eben
> explizite geometrische Angaben aus, weil diese Angaben so in CSS zur
> Zeit nicht möglich sind.


Sind sie doch:

<https://caniuse.com/#search=shape>
<https://caniuse.com/#search=clip-path>
<https://caniuse.com/#search=%3Abefore>

> Beispiel (mit den Proportionen, die ich zuvor genannt hatte):
> <?xml version="1.0" encoding="UTF-8"?>
> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
> "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
> <svg xmlns="http://www.w3.org/2000/svg">
> <polygon points="0,0 0,250 170,250 170,20 0,0" class="trapezoid"
> fill="#F37021" />
> </svg>
> Die Pfade einfacher Polygone lassen sich sehr mühelos direkt von Hand
> eintragen.*


Nett, wobei das class-Attribut aber überflüssig ist. Und mit data-URIs
braucht man keine eigene Datei dafür. Dafür die Ausgabe von

"url(data:image/svg+xml;base64," + window.btoa(`<?xml version="1.0"
encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg">
<polygon points="0,0 0,250 170,250 170,20 0,0" fill="#F37021" />
</svg>`) + ")"

in der Developer-Console (ohne Anführungszeichen) als Wert der ?background-
image?-Eigenschaft angeben (in der Chromium-Console kann man es durch Klick
auf den URI auch gleich testen).

<https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs>

PointedEars

Ähnliche Themen