Mobirise Tutorials

Border Radius Konkav

Zunächst vielen Dank für den Tipp von unserem Forum-Mitglied Frank von afripix-web.de hier jede Ecke einzeln zu gestalten.

Für mein Beispiel der konkaven Border oben, habe ich einen einfachen Textblock aus der Rubrik "Article" vom Standard-Thema "Mobirise5" verwendet und folgende CSS im Bereich "CSS Editor" vom "Code Editor" eingetragen:

.konkave-border {
 border-style: solid;
 border-width: 2px;
 border-color: blue;
 padding: 2rem;
 /* optionale Hintergrundfarbe für den Inhalt */
 background-color: white;
}
.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: #92c9f6;
}
.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;
}

Diese <div> Container erzeugen die 4 Ecken sowie den Inhalt, wobei die class="container" von Mobirise hinzugefügt werden muss, damit die absolute Position der class="ecken" sich auf diesen Container und nicht einen äußeren Container bezieht. Die Style-Anweisung "magin: auto;" am <p> Tag zentriert den Inhalt vertikal.

<div class="konkave-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>
    Mein Inhalt<br><br>
  </p>
</div>