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?
Antworten:
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;
}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.
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:
linear-gradient().background-sizediese Option, um das width/ heightder oben erstellten Bilder so anzupassen , dass es wie ein Rand aussieht.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:
Beispiel mit beidseitig aufgebrachtem Rand:
Beispiel mit allseitig aufgesetztem Rand:
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.
height. Verwenden Sie zum Ersetzen des Zellrahmens in einem TD-Tag <td>your content<hr/></td>.
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.
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
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.