Jede Art und Weise zu begrenzen Grenze Länge?

Question

Gibt es eine Möglichkeit, die Länge einer Grenze zu begrenzen. Ich habe eine <div>, die eine untere Grenze hat, aber ich möchte eine Grenze auf der linken Seite des <div> hinzufügen, dass nur die Hälfte des Weges erstreckt sich auf.

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

Answer 1

Hope, 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>

Answer 2

CSS generierte Inhalte können dieses Problem lösen für Sie:

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;
}

(Anmerkung - die content: ""; Erklärung ist notwendig, um für das pseudo-Element zu machen)

Answer 3

Die :after Gesteine:)

Wenn Sie ein bisschen spielen können Sie sogar Ihre Größe veränderte Randelement gesetzt zentriert erscheinen oder nur angezeigt werden, wenn ein anderes Element ist neben ihm (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>

Answer 4

  

Mit CSS-Eigenschaften, können wir nur die Dicke der Grenzkontrolle; nicht lang.

Wir können jedoch Mimik Grenzeffekt und steuern ihre width und height wie wir mit einigen anderen Möglichkeiten wollen.

Mit CSS (Linear Gradient):

Wir können linear-gradient() verwenden, um ein Hintergrundbild zu erstellen (s) und Kontrolle seine Größe und Position mit CSS, so dass es wie eine Grenze aussieht. Da wir mehrere Hintergrundbilder auf ein Element anwenden können, können wir diese Funktion verwenden, um mehrere Grenz wie Bilder zu erstellen und auf verschiedenen Seiten des Elements gelten. Wir können auch die restliche zur Verfügung stehende Fläche mit einigem festen Farbe, Farbverlauf oder Hintergrundbild abdecken.

Erforderlich HTML:

Alles was wir brauchen ist ein Element nur (möglicherweise etwas Klasse hat).

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

Schritte:

1. Erstellen Sie Hintergrundbild (n) mit linear-gradient().
2. Verwenden Sie background-size die width / height von oben erstellten Bildes einzustellen (n), so dass es wie eine Grenze aussieht.
3. Verwenden Sie background-position Position einzustellen (wie left, right, left bottom etc.) der oben erstellten Grenze (n).

Notwendige 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 linear-gradient() können wir Grenzen von fester Farbe schaffen sowie mit Steigungen. Im Folgenden werden mit dieser Methode einige Beispiele von Grenz erstellt.

Beispiel mit Rand auf der einen Seite nur angewendet:

.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 Grenze angewandt auf zwei Seiten:

.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 Rand auf allen Seiten angewendet:

.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>

Screenshot:

Answer 5

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

hr { width: 90%; }

aber es ist nicht möglich zu begrenzen Randhöhe. nur Elementhöhe.

Answer 6

Die Grenzen sind pro Seite definiert, nicht nur in Bruchteilen einer Seite. Also, nein, man kann das nicht tun.

Auch ein neues Element würde keine Grenze entweder, es würde nur imitiert das Verhalten Sie wollen -. Aber es wäre immer noch ein Element sein,

Answer 7

Ein andere Möglichkeit, dies zu tun, wird mit border-Bild in Kombination mit einem linearen Gradienten.

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: alle

Firefox: 15 +

Für eine bessere Unterstützung auch Anbieter Präfixe hinzufügen.

caniuse border-image

Answer 8

Dies ist ein CSS-Trick, keine formale Lösung. Ich lasse den Code mit der schwarzen Periode, weil es mir das Element hilft zu positionieren. Danach Farbe Ihre Inhalte (Farbe: weiß) und (margin-top: -5px oder so). Zu machen, als ob die Zeit nicht da ist

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

Answer 9

Eine andere Lösung ist, dass Sie ein Hintergrundbild zu imitieren das Aussehen eines linken Rand

verwenden könnte

1. Erstellen Sie die border-left-Stil Sie als Grafik benötigen
2. Position sie ganz links Ihren div (es lange genug für älteren Browser etwa zwei Textgröße nimmt zu handhaben)
3. Stellen Sie die vertikale Position 50% von der Spitze Ihres div.

Sie können für IE zwicken müssen (wie üblich), aber es ist einen Versuch wert, wenn das der Entwurf, den Sie für gehen.

• Ich bin generell gegen die Bilder für etwas verwenden, das CSS von Natur bietet, aber manchmal, wenn das Design es braucht, gibt es keinen anderen Weg, um ihn herum.

Answer 10

Sie können nur eine Grenze pro Seite definieren. Sie würden ein zusätzliches Element für das addieren!