Sınır uzunluğunu sınırlamanın herhangi bir yolu var mı?

Bir sınırın uzunluğunu sınırlamanın herhangi bir yolu var mı? Bir var <div>bir alt sınır vardır, ama sol kenarlık eklemek istediğiniz <div>tek yol yukarı yarısını uzanır.

Sayfaya fazladan eleman eklemeden bunu yapmanın bir yolu var mı?

Bu yardımcı olur umarım:

#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 tarafından oluşturulan içerik bunu sizin için çözebilir:

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>

(not - content: "";sözde öğenin oluşturulması için bildirim gereklidir)

:afterkayalar :)

Biraz oynatırsanız, yeniden boyutlandırılmış kenarlık öğenizi ortalanmış olarak veya yalnızca yanında başka bir öğe varsa (menülerdeki gibi) görünecek şekilde ayarlayabilirsiniz. Menü içeren bir örnek:

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

CSS özellikleri ile yalnızca sınır kalınlığını kontrol edebiliriz; uzunluk değil.

Ancak sınır etkisini taklit edebilir ve kontrol edebiliriz widthve heightistediğimiz gibi başka yollarla.

CSS ile (Doğrusal Degrade):

linear-gradient()Bir arka plan resmi (ler) oluşturmak ve boyutunu ve konumunu CSS ile sınır olarak görünecek şekilde kontrol etmek için kullanabiliriz . Bir öğeye birden çok arka plan görüntüsü uygulayabildiğimizden, bu özelliği görüntüler gibi birden çok kenarlık oluşturmak ve öğenin farklı kenarlarına uygulamak için kullanabiliriz. Kalan kullanılabilir alanı düz renk, gradyan veya arka plan görüntüsü ile de kaplayabiliriz.

Gerekli HTML:

Tek ihtiyacımız olan sadece bir element (muhtemelen bir sınıfa sahip).

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

Adımlar:

1. İle arka plan resimleri oluşturun linear-gradient().
2. background-sizeAyarlamak için kullanınwidth / heightoluşturulan görüntü (ler) böylece bir sınır gibi görünüyor yukarıdakilerin.
3. Kullanım background-positionpozisyonunu (gibi ayarlamak için left, right, left bottomyaratılan sınırında yukarıda (s) vs.).

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

Örnekler:

İle linear-gradient() degradelerin yanı sıra düz renk sınırları oluşturabiliriz. Aşağıda bu yöntemle oluşturulan bazı sınır örnekleri verilmiştir.

Yalnızca bir tarafa kenarlık uygulanmış örnek:

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

İki yüze kenarlık uygulanmış örnek:

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

Her tarafa kenarlık uygulanmış örnek:

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

Ekran görüntüsü:

yatay çizgiler için hr etiketini kullanabilirsiniz:

hr { width: 90%; }

ancak kenarlık yüksekliğini sınırlamak mümkün değildir. sadece eleman yüksekliği.

Sınırlar, bir tarafın kesirlerinde değil, yalnızca her kenar için tanımlanır. Yani, hayır, bunu yapamazsın.

Ayrıca, yeni bir öğe de kenarlık olmaz, yalnızca istediğiniz davranışı taklit eder - ama yine de bir öğe olur.

Bunu yapmanın başka bir yolu da sınır görüntüsünü doğrusal bir gradyanla birlikte kullanmaktır.

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/

Tarayıcı Desteği: IE: 11+

Chrome: hepsi

Firefox: 15+

Daha iyi bir destek için satıcı önekleri de ekleyin.

caniuse sınır resmi

Bu bir CSS hilesi, resmi bir çözüm değil. Kodu siyah nokta ile bırakıyorum çünkü elemanı konumlandırmama yardımcı oluyor. Daha sonra, içeriğinizi (renk: beyaz) ve (kenar boşluğu üst: -5px ya da) renklendirin.

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

Başka bir çözüm, sol kenarlığın görünümünü taklit etmek için arka plan resmini kullanabilmenizdir

1. Grafik olarak istediğiniz kenarlık sol stilini oluşturun
2. Div'inizin en soluna yerleştirin (eski tarayıcılar için kabaca iki metin boyutu artışını işlemek için yeterince uzun yapın)
3. Dikey konumu div'inizin üstünden% 50 olarak ayarlayın.

IE için ince ayar yapmanız gerekebilir (her zamanki gibi), ancak gideceğiniz tasarım budur.

• Genellikle CSS'nin doğal olarak sağladığı bir şey için görüntüleri kullanmaya karşıyım, ancak bazen tasarımın ihtiyacı varsa, başka bir yol yoktur.

Yalnızca her kenar için bir kenarlık tanımlayabilirsiniz. Bunun için fazladan bir eleman eklemeniz gerekir!