Gibt es Möglichkeiten, die Grenzlänge zu begrenzen?

Gibt es eine Möglichkeit, die Länge einer Grenze zu begrenzen? Ich habe ein

, das einen unteren Rand hat, aber ich möchte einen Rand auf der linken Seite des

hinzufügen, der nur die Hälfte des Weges nach oben streckt.

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

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

(Hinweis – der content: ""; Deklaration ist notwendig, damit das Pseudo-Element gerendert wird)

Das :after Felsen 🙂

Wenn Sie ein wenig spielen, können Sie sogar einstellen, dass das geänderte Randelement zentriert angezeigt wird oder nur angezeigt wird, wenn sich daneben ein anderes Element 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; } 
  

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

 hr { width: 90%; } 

aber es ist nicht möglich, die Grenzhöhe zu begrenzen. nur Elementhöhe.

Mit CSS-Eigenschaften können wir nur die Dicke der Grenze steuern; nicht Länge.

Allerdings können wir den Randeffekt nachahmen und seine width und height andere Weise steuern.

Mit CSS (Linearer Verlauf):

Wir können linear-gradient() , um ein oder mehrere Hintergrundbilder zu erstellen und seine Größe und Position mit CSS so zu steuern, dass es wie ein Rahmen aussieht. Da wir mehrere Hintergrundbilder auf ein Element anwenden können, können wir mit dieser function mehrere rahmenartige Bilder erstellen und auf verschiedene Seiten des Elements anwenden. Wir können auch den verbleibenden verfügbaren Bereich mit einem einfarbigen, Gradienten- oder Hintergrundbild abdecken.

Erforderliches HTML:

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

 

Schritte:

  1. Erstellen Sie Hintergrundbilder mit linear-gradient() .
  2. Verwenden Sie background-size , um die width / height der oben erstellten Bilder so anzupassen, dass sie wie ein Rahmen aussieht.
  3. Verwenden Sie die background-position , um die Position (wie left , right , left bottom usw.) der oben erstellten Ränder anzupassen.

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 ie 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() wir sowohl Volltonfarben als auch Farbverläufe erzeugen. Im Folgenden finden Sie einige Beispiele für mit dieser Methode erstellte Rahmen.

Beispiel mit nur einseitig aufgebrachter Umrandung:

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

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

Ein neues Element wäre auch kein Rahmen, es würde nur das Verhalten nachahmen, das Sie wollen – aber es wäre immer noch ein Element.

Dies ist ein CSS-Trick, keine formale Lösung. Ich lasse den Code mit der Periode schwarz, weil es mir hilft, das Element zu positionieren. Danach färbe deinen Inhalt (Farbe: weiß) und (Rand oben: -5px oder so), um es so zu machen, als ob die Periode nicht da 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 Rahmens nachzuahmen

  1. Erstellen Sie den gewünschten linken Rahmenstil als Grafik
  2. Positioniere es ganz links von deinem div (mach es lang genug um ungefähr zwei Textgrößen zu erhöhen für ältere Browser)
  3. Setze die vertikale Position 50% vom oberen Rand deines Div.

Sie müssen möglicherweise für IE (wie üblich) zwicken aber es ist einen Versuch wert, wenn das das Design ist, das Sie anstreben.

  • Ich bin generell dagegen, Bilder für etwas zu verwenden, was CSS von Natur aus bietet, aber manchmal, wenn das Design es braucht, gibt es keinen anderen Weg.

Eine andere Möglichkeit besteht darin, border-image in Kombination mit einem linearen Gradienten 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; } 
 

Sie können nur eine Grenze pro Seite definieren. Sie müssten dafür ein extra Element hinzufügen!