Seite 1 von 1
Listenecke
Verfasst: Sa 2. Aug 2025, 12:00
von 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.....
Re: Listenecke
Verfasst: Sa 2. Aug 2025, 12:08
von scherenschlag
- Innenrand.png (5.89 KiB) 391 mal betrachtet
So was meine ich.
Re: Listenecke
Verfasst: Sa 2. Aug 2025, 12:32
von 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;
}
Re: Listenecke
Verfasst: Sa 2. Aug 2025, 12:50
von scherenschlag
Danke. Werde ich mal versuchen.
Re: Listenecke
Verfasst: Sa 2. Aug 2025, 12:52
von Tommy Herrmann
Die Border wird im konkaven Bereich noch nicht angezeigt
Ich befürchte, da muss ich passen
Re: Listenecke
Verfasst: So 3. Aug 2025, 05:45
von 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;
}
Re: Listenecke
Verfasst: So 3. Aug 2025, 06:13
von Tommy Herrmann
Ah - jede Ecke einzeln - gute Idee
Re: Listenecke
Verfasst: So 3. Aug 2025, 06:19
von Tommy Herrmann
sieht hier gerade noch so aus
Ecken im falschen Container
Re: Listenecke
Verfasst: So 3. Aug 2025, 06:31
von Tommy Herrmann
Also Variablen im Code, die es woanders gar nicht gibt - ist schlecht:
… 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.
Re: Listenecke
Verfasst: So 3. Aug 2025, 06:36
von Tommy Herrmann
... ja klar - es fehlt noch die Hintergrundfarbe (fehlende Variable):
Re: Listenecke
Verfasst: So 3. Aug 2025, 06:46
von 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.
Re: Listenecke
Verfasst: So 3. Aug 2025, 06:48
von 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>
Re: Listenecke
Verfasst: Mo 4. Aug 2025, 06:10
von Tommy Herrmann
Moin,
Ich habe das mit dem invertierten (konkaven)
Border-Radius in einem Tutorial festgehalten:
https://www.mobirise-tutorials.com/Tuto ... onkav.html