Listenecke

[scherenschlag]

Moin.
Ich habe da mal eine Liste. Mit Außenecke.
Sie an den vier Ecken rund zu bekommen ist ja nicht das Problem.
Rundung nach außen. Klar soweit.
Nun möchte ich die Eckenrundung aber nicht außen haben,
sondern nach innen.
An welcher CSS Stelle muss ich denn da schrauben?
Nur mal so als Beispiel:
https://www.tsad17.de
Ist nur so eine Idee.....

[scherenschlag]

Innenrand.png (5.89 KiB) 382 mal betrachtet

So was meine ich.

[Tommy Herrmann]

Moin,

kannst das mal versuchen.

Die Maske "schneidet" die Ecken aus, sodass es aussieht wie eine konkave (nach innen gezogene) Ecke.

Funktioniert nicht im Internet Explorer und eingeschränkt in manchen, älteren Firefox-Versionen.

Code: Alles auswählen

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 2px solid rgba(0, 0, 0, 0.5);
  border-radius: 30px;

  /* Neue Zeilen für invertierte Rundung */
  -webkit-mask-image: radial-gradient(circle at top left, transparent 30px, black 31px),
                      radial-gradient(circle at top right, transparent 30px, black 31px),
                      radial-gradient(circle at bottom left, transparent 30px, black 31px),
                      radial-gradient(circle at bottom right, transparent 30px, black 31px);
  -webkit-mask-composite: destination-in;
  mask-composite: intersect;
}

[scherenschlag]

Danke. Werde ich mal versuchen.

[Tommy Herrmann]

Die Border wird im konkaven Bereich noch nicht angezeigt Ich befürchte, da muss ich passen

[stobi_de]

Na ja, so einigermaßen mit Rumschieben von DIVs - aber schön ist anders!

Code: Alles auswählen

<div class="mbr-figure spezi-border container" mbr-style="{'width': mediaSize + '%'}">
                <div class="ecken ecke-ol"></div>
                <div class="ecken ecke-or"></div>
                <div class="ecken ecke-ur"></div>
                <div class="ecken ecke-ul"></div>
				<img src="../_images/img/30.jpg" alt="Mobirise">
			</div>

.spezi-border {
  border-style: solid;
  border-width: 3px;
  border-color: black;
  padding: 2rem;
}
.ecken {
  border-style: solid;
  border-color: black;
  position: absolute;
  width: 20px;
  height: 20px;
  background: @bg-value;
}
.ecke-ol {
  border-width: 0px 3px 3px 0px;
  border-radius: 0% 0% 50% 0%;
  top: -3px;
  left: -3px;
}
.ecke-or {
  border-width: 0px 0px 3px 3px;
  border-radius: 0% 0% 0% 50%;
  top: -3px;
  right: -3px;
}
.ecke-ur {
  border-width: 3px 0px 0px 3px;
  border-radius: 50% 0% 0% 0%;
  bottom: -3px;
  right: -3px;
}
.ecke-ul {
  border-width: 3px 3px 0px 0px;
  border-radius: 0% 50% 0% 0%;
  bottom: -3px;
  left: -3px;
}

[Tommy Herrmann]

Ah - jede Ecke einzeln - gute Idee

[Tommy Herrmann]

sieht hier gerade noch so aus Ecken im falschen Container

[Tommy Herrmann]

Also Variablen im Code, die es woanders gar nicht gibt - ist schlecht:

Code: Alles auswählen

background: @bg-value;

… und das sieht dann bei mir, in einem einfachen Textblock "Article" vom Thema "Mobirise5" so aus - habe jetzt aber auch keine Zeit das zu analysieren.

[Tommy Herrmann]

... ja klar - es fehlt noch die Hintergrundfarbe (fehlende Variable):

[stobi_de]

Wir sollten hier vielleicht noch extra erwähnen, dass das DIV, welches die Ecken bekommen soll, auch die Klasse CONTAINER bekommen muss, weil sich die Positionierung nur auf den nächst höheren Container bezieht, was eigentlich eine blöde Sache ist.

[Tommy Herrmann]

Danke Frank,

große Klasse Ich werde das in ein Tutorial schreiben, sonst vergesse ich das wieder. Das ist genial !!!!

Das sieht jetzt in meinem Versuch so aus:


CSS:

Code: Alles auswählen

.spezi-border {
  border-style: solid;
  border-width: 2px;
  border-color: blue;
  padding: 2rem;
  /* optionale Hintergrundfarbe für den Inhalt */
  background-color: yellow;
}
.ecken {
  border-style: solid;
  border-color: blue;
  position: absolute;
  width: 30px;
  height: 30px;
  /* Hintergrundfarbe der Ecke muss gleich mit der Hintergrundfarbe vom Mobirise-Block sein */
  background-color: white;
}
.ecke-ol {
  border-width: 0px 2px 2px 0px;
  border-radius: 0 0 30px 0;
  top: -2px;
  left: -2px;
}
.ecke-or {
  border-width: 0px 0px 2px 2px;
  border-radius: 0 0 0 30px;
  top: -2px;
  right: -2px;
}
.ecke-ur {
  border-width: 2px 0px 0px 2px;
  border-radius: 30px 0 0 0;
  bottom: -2px;
  right: -2px;
}
.ecke-ul {
  border-width: 2px 2px 0px 0px;
  border-radius: 0 30px 0 0;
  bottom: -2px;
  left: -2px;
}

HTML:

class="container" zusätzlich am äußeren <div> damit sich die Position "absolute" der Ecken auf dieses <div> bezieht
margin: auto am <p>Tag</p> zum vertikalen Zentrieren vom Inhalt

Code: Alles auswählen

<div class="spezi-border container">
    <div class="ecken ecke-ol"></div>
    <div class="ecken ecke-or"></div>
    <div class="ecken ecke-ur"></div>
    <div class="ecken ecke-ul"></div>
    <p style="margin: auto;" class="mbr-text mbr-fonts-style" data-app-selector=".mbr-text" mbr-theme-style="display-7">
        <br>Hallo Welt<br><br>
    </p>
</div>

[Tommy Herrmann]

Moin,

Ich habe das mit dem invertierten (konkaven) Border-Radius in einem Tutorial festgehalten:

https://www.mobirise-tutorials.com/Tuto ... onkav.html