Schraegen div erstellen

[nierewa]

Hallo,

ein neues Problem.
Ich muß das per css nachbauen:

Den Div schraeg und in der Mitte hab ich schon, jedoch habert es an der Schrift.
Ich weiß nicht wie ich da rangehen soll.

Hab schon writing-mode: sideways-lr versucht. dann steht die Schrift zwar richtig,
ist aber verzerrt.

Kann mir jemand helfen?

Vg

 

[tollertyp]

Wenn die Schrift nicht entlang des Divs geht, ist vielleicht der Div nicht schräg?

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate

Oder wie sieht denn dein aktueller Stand aus? Weil wir nicht wissen, was mit dem Text nicht stimmt, weil es aus deiner so detaillierten Problembeschreibung nicht hervor geht.

 

[nierewa]

Wenn die Schrift nicht entlang des Divs geht, ist vielleicht der Div nicht schräg?

??? sagte doch das ich das schon hab

Im Prinzip hatte ich darauf gehofft das mir jemand sagen kann wie das geht ohne mein Zeug zu sehen.
Mei Stand ist so:

CSS

div#start{
        width: 380px;
        height:250px;
        margin: 0 auto;
        position:relative;
        overflow:hidden;
        background-color:rgba(79,154,93,1);
        }
        span#balken_schraeg{
              height: 100%;
               width: 100px;
               background-color: rgba(0,0,0,0.5);
               display: block;
               position: absolute;
               z-index: 2;
               transform: skewX(-56.3deg);
               left: 45%;
               right: 0;
               padding: 0;
               margin: 0;
               border: 1px solid red;
        
           }
        
        span#text{
              color:#ffffff;
              position: relative;
              top: 40%;
              writing-mode: sideways-lr;
           
        }

HTML

<div id="start"><span id="balken_schraeg"><span id="text">Kompetenz</span></span></div>

Aussehen tut das so

Habs in der Zwischenzeit hinbekommen.
Falls jemand das gleiche Problem hat:

span#text{
transform: skewX(56.3deg) rotate(326deg);
display: block;
top: 57%;
left: -90%;
position: relative;
word-wrap: none;
width: 300px;
white-space: nowrap;
font-size: 40px;
text-transform: uppercase;
color: white;
letter-spacing: 10px;
}

Hatte das zwar vorher schon mal so, da hatte es den Text aber verzerrt.

 

[ger.ruler]

hey...

• warum wrapst du ein span in ein span element ?
• wozu verwendest du denn überhaupt ein span ? (bestandteil einer anforderung?)
• warum verwendest du skew ?

 

[nierewa]

Hi,

warum wrapst du ein span in ein span element ?

Damit ich den Text für sich behandeln kann. Ich habe nicht den gesamten Quellcode der Seite gepostet

wozu verwendest du denn überhaupt ein span ?

Ich könnte auch einen Div nehmen, aber wie gesagt....

warum verwendest du skew ?

Um den Span bzw. das Blockelement zu neigen.
clip-path wird ja leider noch nicht von jedem Browser unterstützt.

 

[ger.ruler]

Damit ich den Text für sich behandeln kann. Ich habe nicht den gesamten Quellcode der Seite gepostet

ok, aber die Vorgehensweise ein Inline in ein Inline gleichen Typs zu wrappen sehe ich sehr selten.....anders hätte ich es verstehen können, ein span in ein a-Tag zu wrappen... als Beispiel, oder in ein block <p>.... Inherit spielt natürlich dann auch eine Rolle....
ohne den Hintergrund oder den geamten Quellcode ist es schwer, hier spezifisch Hilfestellung zu geben... Ich konnte dein Problem mit viel weniger Code lösen..... aber natürlich nur unter der Voraussetzung deiner zuerst genannten Problemstellung

Um den Span bzw. das Blockelement zu neigen.
clip-path wird ja leider noch nicht von jedem Browser unterstützt.

Statt zu neigen könntest du um die Z-Achse rotieren, das würde dir für dieses Beispiel ein paar Sachen erleichtern

 

[ger.ruler]

Ich könnte auch einen Div nehmen, aber wie gesagt....

Als Ergänzung:
Ich wollte eher darauf anspielen, dass du auch nur den Plaintext deines Wrappers hättest benutzen können. Weitere Elemente wären nicht erforderlich gewesen

 

[nierewa]

Hi,

nur Plaintext geht doch nicht. Dann wäre doch die Schrift auch verzerrt.
Oder ist das bei Rotate anders....? Probier ich gleich mal aus

 

[ger.ruler]

Ich habe bei meinem Test deine beiden Spans durch ein Div ersetzt, Plaintext rein und rotiert. Das hat etwas Code verkürzt und durch Rotate hast du keine Probleme mit Verzerrungen

 

[nierewa]

Könntest Du mir Deinen Code mal zeigen?
Entweder verstehe ich Dich nicht richtig oder bei mir spinnt was rum.

Ich bekomm es einfach nicht hin das es so aussieht wie auf dem Bild von Post 1.
Aber so wäre es natürlich um ein vielfaches einfacher.

 

[ger.ruler]

Könntest Du mir Deinen Code mal zeigen?
Entweder verstehe ich Dich nicht richtig oder bei mir spinnt was rum.

Ich bekomm es einfach nicht hin das es so aussieht wie auf dem Bild von Post 1.
Aber so wäre es natürlich um ein vielfaches einfacher.

Gerne:

CSS:
       :root {
            --font-size: 40px;
            --div-width: 380px;
            --div-heigth: 250px;
            --balken-width: calc( var(--div-width) + 50% );
        }

        #start {
            width: var(--div-width);
            height: var(--div-heigth);
            margin: 0 auto;
            overflow: hidden;
            background-color: rgba(79, 154, 93, 1);
        }

        #balken_schraeg {
            width: var(--balken-width);
            background-color: rgba(0, 0, 0, 0.5);
            transform:
                translateX(-88px)
                translateY(98px)
                rotateZ(-32deg);
            border: 1px solid red;
            text-align: center;
            color: #ffffff;
            font-size: var(--font-size);
            letter-spacing: 10px;
            
index.html:
        <div id="start">
            <div id="balken_schraeg">KOMPETENZ</div>
        </div>

Ich habe jetzt auf die Stylings verzichtet, aber die kannst du ja nachträglich implementieren

 

[nierewa]

:root {
--font-size: 40px;
--div-width: 380px;
--div-heigth: 250px;
--balken-width: calc( var(--div-width) + 50% ); -> das war mein Problem. Super Lösung
}

Das ist ja mal ne geile Sache. Hab ich so noch nicht gewußt.

Fällt Dir zu diesem Thema von mir auch noch was ein?

Vielen vielen Dank.
Da sieht man mal wieder das man nie auslernt

 

[ger.ruler]

Das ist ja mal ne geile Sache. Hab ich so noch nicht gewußt.

Fällt Dir zu diesem Thema von mir auch noch was ein?

Vielen vielen Dank.
Da sieht man mal wieder das man nie auslernt

Das ist das schöne am Programmieren, dass man nie auslernen kann Ich hoffe, du kannst das mitnehmen und für dich nutzen und umsetzen.

Wir arbeiten in unseren kleinen Projekten öfters mal mit CSS-Variablen, es ist einfacher das zu pflegen und zu kalkulieren (allerdings ist obiges Beispiel keine "good practice"), vor allem wenn man keine Frameworks benutzt. Aber es gibt natürlich 50 verschiedene Wege, an die Sache heranzugehen

Deine Dreieck-Divs habe ich schon überflogen, aber das werde ich mir erst nächste Woche genauer anschauen können. Ich muss noch ein paar Präsentationen vorbereiten für die kommenden Tage, das spannt mich gerade ziemlich ein.