Gibt es eine Möglichkeit, die Randlänge zu begrenzen?

Gibt es eine Möglichkeit, die Länge eines Rahmens zu begrenzen? Ich habe eine <div>, die einen unteren Rand hat, aber ich möchte links von dem einen Rand hinzufügen <div>, der sich nur bis zur Hälfte erstreckt.

Gibt es eine Möglichkeit, dies zu tun, ohne zusätzliche Elemente auf der Seite hinzuzufügen?

Hoffe das hilft:

#mainDiv {
  height: 100px;
  width: 80px;
  position: relative;
  border-bottom: 2px solid #f51c40;
  background: #3beadc;
}

#borderLeft {
  border-left: 2px solid #f51c40;
  position: absolute;
  top: 50%;
  bottom: 0;
}

<div id="mainDiv">
  <div id="borderLeft"></div>
</div>

CSS-generierte Inhalte können dies für Sie lösen:

div {
  position: relative;
}


/* Main div for border to extend to 50% from bottom left corner */

div:after {
  content: "";
  background: black;
  position: absolute;
  bottom: 0;
  left: 0;
  height: 50%;
  width: 1px;
}

<div>Lorem Ipsum</div>

(Hinweis - Die content: "";Deklaration ist erforderlich, damit das Pseudoelement gerendert werden kann.)

Die :afterFelsen :)

Wenn Sie ein bisschen spielen, können Sie sogar festlegen, dass das verkleinerte Rahmenelement zentriert oder nur angezeigt wird, wenn sich ein anderes Element daneben befindet (wie in Menüs). Hier ist ein Beispiel mit einem Menü:

#menu > ul > li {
    position: relative;
    float: left;
    padding: 0 10px;
}

#menu > ul > li + li:after {
    content:"";
    background: #ccc;
    position: absolute;
    bottom: 25%;
    left: 0;
    height: 50%;
    width: 1px;
}

#menu > ul > li {
  position: relative;
  float: left;
  padding: 0 10px;
  list-style: none;
}
#menu > ul > li + li:after {
  content: "";
  background: #ccc;
  position: absolute;
  bottom: 25%;
  left: 0;
  height: 50%;
  width: 1px;
}

<div id="menu">
  <ul>
    <li>Foo</li>
    <li>Bar</li>
    <li>Baz</li>
  </ul>
</div>

Mit CSS-Eigenschaften können wir nur die Dicke des Rahmens steuern. nicht Länge.

Allerdings können wir mimischen Effekt Grenze und steuern seine widthund heightwie wir mit einigen anderen Möglichkeiten wollen.

Mit CSS (Linear Gradient):

Wir können linear-gradient()Hintergrundbilder erstellen und ihre Größe und Position mit CSS so steuern, dass sie wie ein Rand aussehen. Da wir einem Element mehrere Hintergrundbilder zuweisen können, können wir mit dieser Funktion mehrere randähnliche Bilder erstellen und auf verschiedene Seiten des Elements anwenden. Wir können den verbleibenden verfügbaren Bereich auch mit Volltonfarben, Farbverläufen oder Hintergrundbildern abdecken.

Erforderliches HTML:

Alles was wir brauchen ist nur ein Element (möglicherweise mit einer Klasse).

<div class="box"></div>

Schritte:

1. Erstellen Sie Hintergrundbilder mit linear-gradient().
2. Verwenden Sie background-sizediese Option, um das width/ heightder oben erstellten Bilder so anzupassen , dass es wie ein Rand aussieht.
3. Verwenden background-positionPosition einzustellen (wie left, right, left bottomusw.) der oben erstellten Grenze (n).

Notwendiges CSS:

.box {
  background-image: linear-gradient(purple, purple),
                    // Above css will create background image that looks like a border.
                    linear-gradient(steelblue, steelblue);
                    // This will create background image for the container.

  background-repeat: no-repeat;

  /* First sizing pair (4px 50%) will define the size of the border i.e border
     will be of having 4px width and 50% height. */
  /* 2nd pair will define the size of stretched background image. */
  background-size: 4px 50%, calc(100% - 4px) 100%;

  /* Similar to size, first pair will define the position of the border
     and 2nd one for the container background */
  background-position: left bottom, 4px 0;
}

Beispiele:

Mit können linear-gradient()wir einfarbige Ränder sowie Farbverläufe erstellen. Im Folgenden finden Sie einige Beispiele für Rahmen, die mit dieser Methode erstellt wurden.

Beispiel mit nur einseitig angewendetem Rand:

.container {
  display: flex;
}
.box {
  background-image: linear-gradient(purple, purple),
                    linear-gradient(steelblue, steelblue);
  background-repeat: no-repeat;
  background-size: 4px 50%, calc(100% - 4px) 100%;
  background-position: left bottom, 4px 0;

  height: 160px;
  width: 160px;
  margin: 20px;
}
.gradient-border {
  background-image: linear-gradient(red, purple),
                    linear-gradient(steelblue, steelblue);
}

<div class="container">
  <div class="box"></div>

  <div class="box gradient-border"></div>
</div>

Beispiel mit beidseitig aufgebrachtem Rand:

.container {
  display: flex;
}
.box {
  background-image: linear-gradient(purple, purple),
                    linear-gradient(purple, purple),
                    linear-gradient(steelblue, steelblue);
  background-repeat: no-repeat;
  background-size: 4px 50%, 4px 50%, calc(100% - 8px) 100%;
  background-position: left bottom, right top, 4px 0;
  
  height: 160px;
  width: 160px;
  margin: 20px;
}

.gradient-border {
  background-image: linear-gradient(red, purple),
                    linear-gradient(purple, red),
                    linear-gradient(steelblue, steelblue);
}

<div class="container">
  <div class="box"></div>

  <div class="box gradient-border"></div>
</div>

Beispiel mit allseitig aufgesetztem Rand:

.container {
  display: flex;
}
.box {
  background-image: linear-gradient(purple, purple),
                    linear-gradient(purple, purple),
                    linear-gradient(purple, purple),
                    linear-gradient(purple, purple),
                    linear-gradient(steelblue, steelblue);
  background-repeat: no-repeat;
  background-size: 4px 50%, 50% 4px, 4px 50%, 50% 4px, calc(100% - 8px) calc(100% - 8px);
  background-position: left bottom, left bottom, right top, right top, 4px 4px;
  
  height: 160px;
  width: 160px;
  margin: 20px;
}

.gradient-border {
  background-image: linear-gradient(red, purple),
                    linear-gradient(to right, purple, red),
                    linear-gradient(to bottom, purple, red),
                    linear-gradient(to left, purple, red),
                    linear-gradient(steelblue, steelblue);
}

<div class="container">
  <div class="box"></div>

  <div class="box gradient-border"></div>
</div>

Bildschirmfoto:

Für horizontale Linien können Sie das hr-Tag verwenden:

hr { width: 90%; }

Es ist jedoch nicht möglich, die Randhöhe zu begrenzen. nur Elementhöhe.

Grenzen werden nur pro Seite definiert, nicht in Bruchteilen einer Seite. Also, nein, das kannst du nicht.

Außerdem wäre ein neues Element auch kein Rand, es würde nur das gewünschte Verhalten nachahmen - aber es wäre immer noch ein Element.

Eine andere Möglichkeit besteht darin, ein Rahmenbild in Kombination mit einem linearen Farbverlauf zu verwenden.

div {
  width: 100px;
  height: 75px;
  background-color: green;
  background-clip: content-box; /* so that the background color is not below the border */
  
  border-left: 5px solid black;
  border-image: linear-gradient(to top, #000 50%, rgba(0,0,0,0) 50%); /* to top - at 50% transparent */
  border-image-slice: 1;
}

<div></div>

jsfiddle: https://jsfiddle.net/u7zq0amc/1/

Browser-Unterstützung: IE: 11+

Chrome: alles

Firefox: 15+

Für eine bessere Unterstützung fügen Sie auch Herstellerpräfixe hinzu.

caniuse Randbild

Dies ist ein CSS-Trick, keine formale Lösung. Ich lasse den Code mit dem Punkt schwarz, weil er mir hilft, das Element zu positionieren. Färben Sie anschließend Ihren Inhalt (Farbe: Weiß) und (Rand oben: -5 Pixel oder so), um ihn so zu gestalten, als ob der Punkt nicht vorhanden wäre.

div.yourdivname:after {
content: ".";
  border-bottom:1px solid grey;
  width:60%;
  display:block;
  margin:0 auto;
}

Eine andere Lösung besteht darin, ein Hintergrundbild zu verwenden, um das Aussehen eines linken Randes nachzuahmen

1. Erstellen Sie den gewünschten Rand-Links-Stil als Grafik
2. Positionieren Sie es ganz links von Ihrem div (machen Sie es lang genug, um ungefähr zwei Textgrößenerhöhungen für ältere Browser zu verarbeiten).
3. Stellen Sie die vertikale Position 50% von der Oberseite Ihres Div ein.

Möglicherweise müssen Sie den IE anpassen (wie gewohnt), aber es ist einen Versuch wert, wenn dies das Design ist, für das Sie sich entscheiden.

• Ich bin generell dagegen, Bilder für etwas zu verwenden, das CSS von Natur aus bereitstellt, aber manchmal, wenn das Design es benötigt, gibt es keinen anderen Weg, um es zu umgehen.

Sie können nur einen Rand pro Seite definieren. Dafür müssten Sie ein zusätzliches Element hinzufügen!