wake-up-neo.net

CSS - Nur Eckumrandung anzeigen

Ich frage mich, ob es in CSS oder Jquery möglich ist, eine Grenze zu erstellen, aber nur für die Ecke. Etwas wie das: 

****                         ****
*                               *
*                               *

             CONTENT

*                               *
*                               *
****                         ****
34

Ich würde überlappende Divs verwenden.

Eins mit eckigen Ecken. Und der Andere mit abgerundeter Ecke (damit die Ecken der ersten nicht verdeckt werden).

<div id="div1" />
<div id="div2" />


#div1 {
  position:absolute;
  top:9px;
  left:9px;
  height:100px;
  width:100px;
  background-color:white;
  border:1px solid black;
}

#div2 {
  position:relative;
  top:-1px;
  left:-1px;
  height:102px;
  width:102px;
  background-color:white;
  border-radius: 15px;
}

http://jsfiddle.net/y3EfP/

Ergebnis:

enter image description here


Eine erweiterte Lösung von @ web-tiki:

http://jsfiddle.net/webtiki/y3EfP/147/

37
Majid Laissi

Angenommen, <div id="content">CONTENT</div> und CONTENT enthält mindestens einen HTML-Knoten.

#content {position:relative}
#content:before, #content:after, #content>:first-child:before, #content>:first-child:after {
    position:absolute; content:' ';
    width:80px; height: 80px;
    border-color:red; /* or whatever colour */
    border-style:solid; /* or whatever style */
}
#content:before {top:0;left:0;border-width: 1px 0 0 1px}
#content:after {top:0;right:0;border-width: 1px 1px 0 0}
#content>:first-child:before {bottom:0;right:0;border-width: 0 1px 1px 0}
#content>:first-child:after {bottom:0;left:0;border-width: 0 0 1px 1px}

Hier ist ein Fiddle

33

SVG

Dies ist eine weitere großartige Alternative, wenn Sie jetzt Vektoren verwenden möchten, um eine hohe Reaktionsfähigkeit zu ermöglichen.

<svg viewBox="0 0 100 100" width="50px">
  <path d="M25,2 L2,2 L2,25" fill="none" stroke="black" stroke-width="3" />
  <path d="M2,75 L2,98 L25,98" fill="none" stroke="black" stroke-width="3" />
  <path d="M75,98 L98,98 L98,75" fill="none" stroke="black" stroke-width="3" />
  <path d="M98,25 L98,2 L75,2" fill="none" stroke="black" stroke-width="3" />
</svg>

SVG ist ein großartiges Werkzeug. Einige der Vorteile von SVG in diesem Fall sind:

  • Kurvensteuerung
  • Füllsteuerung (Deckkraft, Farbe)
  • Kontursteuerung (Breite, Deckkraft, Farbe)
  • Menge des Codes
  • Zeit zum Bauen und Erhalten der Form
  • Skalierbar
  • Keine HTTP-Anfrage (wenn inline wie im Beispiel verwendet)

Browser-Unterstützung für Inline-SVG geht zurück zu Internet Explorer 9. Weitere Informationen finden Sie in canIuse .

15
Stewartside

Hier sind ein paar Methoden, um diesen Effekt zu erzeugen, ohne zusätzliche Pseudo-/Real-Elemente zu verwenden. Zu beachten ist, dass beide Ansätze nur in modernen Browsern funktionieren, da sie CSS3-Eigenschaften verwenden. 

Usingborder-image: Die border-image-Eigenschaft macht es relativ einfach, solche Effekte zu erstellen. Der Ansatz ist wie folgt:

  • Erstellen Sie ein transparentes Bild, das genau wie hier in der Ecke Ränder hat.
  • Setzen Sie dieses Bild als border-image-source und lassen Sie den Browser den Rest erledigen :) Da der Standardwert für border-image-repeatstretch ist, würde der Browser das Originalbild so strecken, dass es in den Container passt, selbst wenn der Container groß wird.
  • Der für die border-image-width-Eigenschaft festgelegte Wert bestimmt, wie dick die Ränder sind.

.bordered {
  background-color: beige;
  border-image-source: url("http://i.stack.imgur.com/s2CAw.png");
  border-image-slice: 1;
  border-image-width: 5px;
}
.square {
  height: 150px;
  width: 150px;
}
.large-square {
  height: 350px;
  width: 350px;
}

/* Just for demo */

div {
  margin-bottom: 10px;
}
<div class='bordered square'></div>
<div class='bordered large-square'></div>

Vorteile:

  • Benötigt keine zusätzlichen Elemente (Pseudo oder Real), was weniger gestörtes Markup bedeutet, Pseudoelemente können für andere Anforderungen verwendet werden.
  • Ist angemessen ansprechbar Das heißt, der Browser passt die Rahmen auch dann an, wenn sich die Abmessungen des Containers ändern.

Nachteile:

  • Relativ niedrigere Browserunterstützung . Wenn IE10-Unterstützung benötigt wird, ist dies ein No-Go.
  • Da das Rahmenbild gestreckt wird und die Leinwand des Originalbilds ein Quadrat und der Container ein Rechteck ist, würden die Rahmen oben und unten breiter aussehen als links und rechts.

    .bordered {
      background-color: beige;
      border-image-source: url("http://i.stack.imgur.com/s2CAw.png");
      border-image-slice: 2;
      border-image-width: 5px;
    }
    .small-square {
      height: 75px;
      width: 75px;
    }
    .square {
      height: 150px;
      width: 150px;
    }
    .large-square {
      height: 350px;
      width: 350px;
    }
    .rectangle {
      height: 150px;
      width: 250px;
    }
    .large-rectangle {
      height: 150px;
      width: 350px;
    }
    
    /* Just for demo */
    
    div {
      margin-bottom: 10px;
    }
    <div class='bordered small-square'></div>
    <div class='bordered square'></div>
    <div class='bordered large-square'></div>
    <div class='bordered rectangle'></div>
    <div class='bordered large-rectangle'></div>


Usingbackground-image: Die background-image-Eigenschaft kann auch mit linear-gradient-Bildern verwendet werden, um den Effekt zu erzeugen. Der Ansatz ist wie folgt:

  • Erstellen Sie vier linear-gradient-Bilder (zwei für oben, unten und zwei für links, rechts). Diese Farbverläufe beginnen mit der erforderlichen Farbe und bleiben für so viele Pixel wie die Breite/Höhe des Randbildes unverändert. Danach sollte es transparent sein. 
  • Für die oberen und unteren Ränder sollte die Richtung des Farbverlaufs to right sein. Für den linken und rechten Rand sollte es to bottom sein.
  • Der background-size-Wert bestimmt die Stärke des Rahmens. Für die oberen und unteren Ränder beträgt die Größe des Farbverlaufs auf der X-Achse 100% und auf der Y-Achse 5px (Dicke). Für den linken und rechten Rand würde die Größe in X-Achse 5px (Dicke) und in Y-Achse 100% betragen.
  • Der background-repeat sollte für den oberen und unteren Rand auf repeat-x und für den linken und rechten Rand auf repeat-y gesetzt werden.
  • Der background-position wird in der X- oder Y-Achse auf (-1 * halb so groß wie die Farbe im Farbverlauf) gesetzt. Dadurch wird die Hälfte des farbigen Bereichs auf einer Seite des Elements angezeigt, während die andere Hälfte auf der anderen Seite angezeigt wird (da sich der Farbverlauf wiederholt).

.bordered.square {
  height: 150px;
  width: 150px;
}
.bordered.rectangle {
  height: 150px;
  width: 250px;
}
.bordered {
  background-color: beige;
  background-image: linear-gradient(to right, black 30px, transparent 30px), linear-gradient(to right, black 30px, transparent 30px), linear-gradient(to bottom, black 30px, transparent 30px), linear-gradient(to bottom, black 30px, transparent 30px);
  background-size: 100% 5px, 100% 5px, 5px 100%, 5px 100%;
  background-position: -15px 0%, -15px 100%, 0% -15px, 100% -15px;
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
}

/* Just for demo */

div {
  margin-bottom: 10px;
}
<div class='bordered square'></div>
<div class='bordered rectangle'></div>

Vorteile:

  • Benötigt keine zusätzlichen Elemente (Pseudo oder Real), was weniger gestörtes Markup bedeutet, Pseudoelemente können für andere Anforderungen verwendet werden.
  • Ist angemessen ansprechend, da die Breite der Farbe im Verlauf festgelegt ist. Wenn die Striche der Breite der Rahmen entsprechend den Abmessungen des Containers geändert werden müssen, können Sie den Pixelwert in Gradienten in Prozent ändern (mit ein paar kleineren Änderungen), wie in dem folgenden Ausschnitt.

    .bordered.square {
      height: 150px;
      width: 150px;
    }
    .bordered.large-square {
      height: 250px;
      width: 250px;
    }
    .bordered {
      background-color: beige;
      background-image: linear-gradient(to right, black 10%, transparent 10%), linear-gradient(to right, black 10%, transparent 10%), linear-gradient(to bottom, black 10%, transparent 10%), linear-gradient(to bottom, black 10%, transparent 10%);
      background-size: 90% 5px, 90% 5px, 5px 90%, 5px 90%;
      background-position: 0% 0%, 0% 100%, 0% 0%, 100% 0%;
      background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
    }
    
    /* Just for demo */
    
    div {
      margin-bottom: 10px;
    }
    <div class='bordered square'></div>
    <div class='bordered large-square'></div>

Nachteile:

  • Relativ bessere Browserunterstützung . Wenn IE9-Unterstützung benötigt wird, ist dies ein No-Go.
  • Wenn ein prozentualer Gradient verwendet wird, wäre der gleiche Nachteil mit Rechtecken, wie er für border-image erwähnt wurde, auch hier anwendbar.
13
Harry

Sie könnten absolut vier <div>s positionieren, einen in jeder Ecke, jeder mit den entsprechenden zwei Rändern.

HTML

<div class="corners">
  <div class="top left"></div>
  <div class="top right"></div>
  <div class="bottom right"></div>
  <div class="bottom left"></div>
  content goes here
</div>

CSS

.corners {
  position: relative;
  width: 100px; /* for demo purposes */
  padding: 10px;
}

.top, .bottom {
  position: absolute;
  width: 10px;
  height: 10px;
}

.top {
  top: 0;
  border-top: 1px solid;
}

.bottom {
  bottom: 0;
  border-bottom: 1px solid;
}

.left {
  left: 0;
  border-left: 1px solid;
}

.right {
  right: 0;
  border-right: 1px solid;
}
11
Neil

Dies erreichen Sie, wenn Sie mehrere lineare Farbverläufe als Hintergrundbild verwenden.

div {
  width: 100px;
  height: 100px;
  margin: 20px;

  background:
    linear-gradient(to right, black 4px, transparent 4px) 0 0,
    linear-gradient(to right, black 4px, transparent 4px) 0 100%,
    linear-gradient(to left, black 4px, transparent 4px) 100% 0,
    linear-gradient(to left, black 4px, transparent 4px) 100% 100%,
    linear-gradient(to bottom, black 4px, transparent 4px) 0 0,
    linear-gradient(to bottom, black 4px, transparent 4px) 100% 0,
    linear-gradient(to top, black 4px, transparent 4px) 0 100%,
    linear-gradient(to top, black 4px, transparent 4px) 100% 100%;

  background-repeat: no-repeat;
  background-size: 20px 20px;
}
<div></div>

6
Robert Kirsz

clip-Pfad

Verwenden Sie zwei Divs übereinander.
Fügen Sie einen Clip-Pfad hinzu, um zu teilen, dass Sie im Hintergrund einen Effekt wie einen Rand erzeugen können.

.wrapper {
  display: inline-block;
  background-color: black;
  line-height: 0px;
  -webkit-clip-path: polygon(0% 100%, 30% 100%, 30% 70%, 70% 70%, 70% 100%, 100% 100%, 100% 70%, 70% 70%, 70% 30%, 100% 30%, 100% 0%, 70% 0%, 70% 30%, 30% 30%, 30% 0%, 0% 0%, 0% 30%, 30% 30%, 30% 70%, 0% 70%);
    clip-path: polygon(0% 100%, 
                             30% 100%, 
                             30% 70%, 
                             70% 70%, 
                             70% 100%, 
                             100% 100%, 
                             100% 70%, 
                             70% 70%,
                             70% 30%,
                             100% 30%,
                             100% 0%,
                             70% 0%,
                             70% 30%,
                             30% 30%,
                             30% 0%,
                             0% 0%,
                             0% 30%,
                             30% 30%,
                             30% 70%,
                             0% 70%);
}
.wrapper {} .wrapper div {
  display: inline-block;
  height: 150px;
  width: 150px;
  margin: 10px;
  background-color: white;
}
<div class="wrapper">
  <div></div>
</div>

zwei Pseudoelemente

Mit zwei großen Pseudoelementen können Sie den Randeffekt erzeugen.

.cut-border {
  position: relative;
  display: inline-block;
  border: 5px solid black;
  width: 150px;
  height: 150px;
}
.cut-border::before {
  content: "";
  position: absolute;
  height: calc(100% + 10px);
  width: 50%;
  background-color: white;
  top: -5px;
  left: 25%;
}
.cut-border::after {
  content: "";
  position: absolute;
  height: 50%;
  width: calc(100% + 10px);
  background-color: white;
  top: 25%;
  left: -5px;
}
<div class="cut-border"></div>

5
Persijn

Ich fand diese Frage, aber ich war mit dem Grenzradius-Ansatz nicht zufrieden: Da ich mehr dicke Ränder verwendete, war der Effekt nicht so gut, wie ich wollte. Es gelang mir, eine weitere Lösung ohne Bilder und ohne zusätzliche Markierungen zu erstellen:

    .box {
        /* fake border */
        position: relative;
        overflow: hidden;
        box-shadow: inset 0px 0px 0px 10px green;
        padding: 1em;
    }

    .box:before {
        /* this element will hide the fake border on the top and bottom */
        content:'';         
        display: block;
        position: absolute;
        border-top:10px solid white;
        border-bottom:10px solid white;
        /* height = border-width x2 */
        height:calc(100% - 20px); 
        top:0;
        /* width = size of fake-border x2 */
        width: calc(100% - 36px);
        /* left = size of fake-border */
        left:18px;
    }

    .box:after {
        /* this element will hide the fake border on the left and right */
        /* the rules for width, heigth, top and left will be the opposite of the former element */
        display: block;
        position: absolute;
        content:'';
        border-right:10px solid white;
        border-left:10px solid white;
        height:calc(100% - 36px);
        width: calc(100% - 20px);
        top:18px;
        left: 0;
    }

Hier ein JSFiddle mit diesem Beispiel: https://jsfiddle.net/t6dbmq3e/ Hoffe es hilft.

3
Raphael Aleixo

Ok, wenn ich CSS einlasse, denke ich, dass ich es nicht selbst schaffen kann, aber ich mache das und es scheint Arbeit zu sein: 

<div id="half" style="position:absolute; top:0; left:0; width:30px; height:30px; overflow:visible; border-top:3px solid #F00; border-left:3px solid #06F;"></div>

<div id="half" style="position:absolute; bottom:0; right:0; width:30px; height:30px; overflow:visible; border-bottom:3px solid #F00; border-right:3px solid #06F;"></div>

Und es scheint zu funktionieren ;-) Sorry für stören und danke für eure Hilfe.

1

Es gibt keine saubere CSS-Methode, um den Ecken nur einen Rahmen zu geben, aber Sie können versuchen, den Effekt zu imitieren. So etwas vielleicht: http://jsfiddle.net/RLG4z/

<div id="corners">
  <div id="content">
    content
  </div>
</div>

#corners {
    width: 200px;
    height: 50px;
    border-radius: 10px;
    background-color: red;
    margin: 10px;
}
#content {
  background-color: white;
  border-radius: 15px;
  height: 30px;
  padding: 10px;
}

aufgrund des Unterschieds im Grenzradius zeigt die Hintergrundfarbe des darunter liegenden div einen Tiefpunkt, was die Wirkung eines Randes an den Ecken ergibt.

Ich persönlich denke, ich würde mit Hintergrundbildern arbeiten, um dies zu erreichen, um das Ergebnis besser steuern zu können.

1
Pevara

Dies ist dein Bild: 

HTML:

<div class="Shell">

    <div class="top">

        <div class="clear">
            <div class="left">
              &#42;&#42;&#42;&#42;
            </div>
            <div class="right">
              &#42;&#42;&#42;&#42;
            </div>
        </div>

        <div class="clear"> 
            <div class="left">
              &#42;
            </div>
            <div class="right">
              &#42;
            </div>
        </div>

        <div class="clear">
            <div class="left">
              &#42;
            </div>
            <div class="right">
              &#42;
            </div>
        </div>

    </div>

    <div class="content">
        <p>CONTENT</p>
    </div>

    <div class="bottom">

        <div class="clear"> 
            <div class="left">
              &#42;
            </div>
            <div class="right">
              &#42;
            </div>
        </div>

        <div class="clear">
            <div class="left">
              &#42;
            </div>
            <div class="right">
              &#42;
            </div>
        </div>

      <div class="clear">
            <div class="left">
              &#42;&#42;&#42;&#42;
            </div>
            <div class="right">
              &#42;&#42;&#42;&#42;
            </div>
        </div>
    </div>

und CSS:

.Shell { width: 200px;}
.left{ float:left; }
.right{float:right; }
.clear { clear: both; line-height: 10px; }
.content { line-height: 10px; text-align: center; }

Hier ist etwas, was ich kürzlich mit vertikal und horizontal zentriertem Inhalt getan habe. 

Das HTML 

<div class="column">
  <div class="c-frame-wrapper">
    <div class="c-frame-tl"></div>
    <div class="c-frame-tr"></div>
    <div class="c-frame-br"></div>
    <div class="c-frame-bl"></div>
    <div class="c-frame-content">
        &copy; Copyright 2015 - Company name<br /><br />
        St Winifrids St,<br />
        The Saints, Harrogate HG1 5PZ, UK<br />
    </div>
  </div>
</div>

Das CSS

.c-frame-wrapper {
  width: 250px;
  height: 100px;
  font-size:11px;
  color: $dark-grey-lighten-70;
  /* center align x axis */
  right: auto;
  left: 50%;
  transform: translateX(-50%);
}

.c-frame-tl {
  top: 0;
  left: 0;
  position: absolute;
  width:10px;
  height:10px;
  border-width: 3px;
  border-style: solid none none solid;
  border-color: #eb0000;
}

.c-frame-tr {
  top: 0;
  right: 0;
  position: absolute;
  width:10px;
  height:10px;
  border-width: 3px;
  border-style: solid solid none none;
  border-color: #eb0000;
}

.c-frame-br {
  bottom: 0;
  right: 0;
  position: absolute;
  width:10px;
  height:10px;
  border-width: 3px;
  border-style: none solid solid none;
  border-color: #eb0000;
}

.c-frame-bl {
  bottom: 0;
  left: 0;
  position: absolute;
  width:10px;
  height:10px;
  border-width: 3px;
  border-style: none none solid solid;
  border-color: #eb0000;
}

.c-frame-content {
  width:100%;
  text-align: center;
  /*center alignment x and y*/
  position: absolute;
  top: 50%;
  left: 50%;
  bottom: auto;
  right: auto;
  transform: translate(-50%,-50%); 
}

JSFiddle

1
amjgbr

Hier ist eine modifizierte Version der obigen Antwort. Diese Version hat ein relativ positioniertes übergeordnetes Element und ein absolut positioniertes untergeordnetes Element, sodass der Hover-Effekt hinzugefügt werden kann. 

http://jsfiddle.net/3jo5btxd/

HTML:
<div id="div1"><div id="div2"><img src="http://placekitten.com/g/82/82"></div></div>

CSS:

#div1 {
    position: relative;
    height: 100px;
    width: 100px;
    background-color: white;
    border: 1px solid transparent;
}

#div2 {
    position: absolute;
    top: -2px;
    left: -2px;
    height: 84px;
    width: 84px;
    background-color: #FFF;
    border-radius: 15px;
    padding: 10px;
}

#div1:hover {
    border: 1px solid red;
}
1
zeros-and-ones

ich denke, die beste Lösung ist die Pseudo-Element-Methode. Schön und sauber und verschmutzt die HTML-Datei nicht mit (zu vielen) zusätzlichen Elementen.

Ich habe dieses sass mixin mit dem obigen Code für eine Copy & Paste-Lösung erstellt:

@mixin corner-borders($corner-width: 1px, $corner-size: 5px, $color-border: grey, $color-background: white) {
    position: relative;
    border: $corner-width solid $color-border;
    background-color: $color-background;

    &::before {
        content: "";
        z-index: 0;
        position: absolute;
        top: -$corner-width;
        bottom: -$corner-width;
        left: $corner-size;
        right: $corner-size;
        background-color: $color-background;
    }

    &::after {
        content: "";
        z-index: 0;
        position: absolute;
        top: $corner-size;
        bottom: $corner-size;
        left: -$corner-width;
        right: -$corner-width;
        background-color: $color-background;
    }
}

Dann kannst du es so benutzen:

html:

<div class="border">
    <div class="content">
        Content
    </div>
</div>

SCSS

.border {
    @include corner-borders;
}

.content {
    position: relative;
    z-index: 1;
}

Sie benötigen den Z-Index und die relative Position, damit der Inhalt über den Pseudoelementen steht.

Ich habe hier eine Codepen-Demo erstellt: http://codepen.io/timrross/pen/XMwVbV

0
Tim