Adakah cara untuk membatasi panjang perbatasan?

216

Apakah ada cara untuk membatasi panjang perbatasan? Saya memiliki <div>yang memiliki batas bawah, tetapi saya ingin menambahkan perbatasan di sebelah kiri <div>yang hanya membentang setengah jalan ke atas.

Apakah ada cara untuk melakukannya tanpa menambahkan elemen tambahan pada halaman?

css

— mcbeav
sumber

175

Semoga ini membantu:

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

Luaskan cuplikan

— sbr
sumber

5

Ini sepertinya masih cara terbaik untuk melakukannya. Ini cross browser kompatibel dan mudah dalam perawatan.

— Pim Schaaf

1

apakah ada cara untuk melakukan ini pada lingkaran?

— www139

1

terapkan bayangan kotak untuk lingkaran.

— Piyush Dholariya

3

Ini mungkin memiliki manfaat kompatibilitas peramban lintas marginal di atas peramban kuno dan lebih mudah dikendalikan melalui JS ... tetapi tidak satu pun dari ini yang menjadi perhatian dari pertanyaan awal. Namun ini menambahkan elemen tambahan ke markup yang diminta untuk menghindari pertanyaan asli. Jadi saya tidak mengerti mengapa ini adalah jawaban yang diterima untuk pertanyaan ini.

— Spencer O'Reilly

Melakukan ini dengan: setelah tidak akan memerlukan markup tambahan

— Tandai

257

Konten yang dihasilkan CSS dapat menyelesaikan masalah ini untuk Anda:

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>

Luaskan cuplikan

(catatan - content: "";deklarasi diperlukan agar elemen pseudo di-render)

— TrevC
sumber

21

Saya pikir ini adalah opsi yang jauh lebih baik, karena tidak memperkenalkan div tambahan.

— Louis Otto

21

Ini harus menjadi jawaban yang diterima karena mendukung CSS sebagai satu-satunya cara untuk menata gaya daripada markup.

— Lukas

4

Sempurna. Dan itu berfungsi seperti yang diharapkan dengan padding & margin juga.

— Nolonar

4

Perlu diingat: Anda tidak dapat mengelola properti pseudo-elemen dari JS (sebenarnya Anda bisa, tetapi itu akan menjadi sangat gila). Jadi jika Anda berencana membuat semacam kemajuan-bar dengan solusi ini - lupakan. Pilih jawaban yang sudah diterima. Dalam semua kasus lain, jawaban ini lebih baik, itu benar.

— Sergei Panfilov

2

Apakah ini lintas browser dan / atau JS kompatibel? Saya lebih suka jawaban yang diterima, karena komentar @ SergeyPanfilov.

— matthaeus

36

:afterBatu - batu :)

Jika Anda bermain sedikit, Anda bahkan dapat mengatur elemen pembatas yang diubah ukurannya agar tampak di tengah atau hanya muncul jika ada elemen lain di sebelahnya (seperti di menu). Berikut ini adalah contoh dengan menu:

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

Tampilkan cuplikan kode

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

Luaskan cuplikan

— pengguna2397120
sumber

1

Bisakah Anda menambahkan sampel HTML? Menurut Anda bagaimana menggunakannya dengan sel tabel, beberapa petunjuk?

— Peter Krauss

21

Dengan properti CSS, kami hanya dapat mengontrol ketebalan batas; tidak panjang.

Namun kita dapat meniru efek perbatasan dan mengontrolnya widthdan heightseperti yang kita inginkan dengan beberapa cara lain.

Dengan CSS (Linear Gradient):

Kita dapat menggunakan linear-gradient()untuk membuat gambar latar belakang dan mengontrol ukuran dan posisinya dengan CSS sehingga terlihat seperti perbatasan. Karena kita dapat menerapkan beberapa gambar latar belakang ke suatu elemen, kita dapat menggunakan fitur ini untuk membuat beberapa perbatasan seperti gambar dan menerapkannya pada sisi elemen yang berbeda. Kami juga dapat menutupi area yang tersisa dengan warna solid, gradien atau gambar latar belakang.

HTML yang dibutuhkan:

Yang kita butuhkan hanyalah satu elemen saja (mungkin memiliki beberapa kelas).

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

Langkah:

Buat gambar latar belakang dengan linear-gradient().
Gunakan background-sizeuntuk mengatur width/ heightdari gambar yang dibuat di atas sehingga terlihat seperti perbatasan.
Gunakan background-positionuntuk menyesuaikan posisi (seperti left, right, left bottomdll) di atas perbatasan dibuat (s).

CSS yang Diperlukan:

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

Contoh:

Dengan linear-gradient()kita dapat membuat batas warna solid serta memiliki gradien. Berikut adalah beberapa contoh perbatasan yang dibuat dengan metode ini.

Contoh dengan batas diterapkan pada satu sisi saja:

Tampilkan cuplikan kode

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

Luaskan cuplikan

Contoh dengan batas diterapkan pada dua sisi:

Tampilkan cuplikan kode

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

Luaskan cuplikan

Contoh dengan batas diterapkan di semua sisi:

Tampilkan cuplikan kode

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

Luaskan cuplikan

Tangkapan layar:

— Mohammad Usman
sumber

14

untuk garis horizontal Anda dapat menggunakan tag jam:

hr { width: 90%; }

tetapi tidak mungkin untuk membatasi ketinggian perbatasan. hanya tinggi elemen.

— Edmhs
sumber

Ya, di sini "lebar" adalah "panjang garis HR". Untuk sesuatu seperti lebar perbatasan gunakan ukuran atribut HR, atau CSS height. Untuk mengganti batas sel dalam penggunaan tag TD <td>your content<hr/></td>.

— Peter Krauss

8

Batas didefinisikan hanya per sisi, bukan dalam pecahan sisi. Jadi, tidak, Anda tidak bisa melakukan itu.

Juga, elemen baru tidak akan menjadi perbatasan juga, itu hanya akan meniru perilaku yang Anda inginkan - tetapi itu masih akan menjadi elemen.

— Ben
sumber

7

Cara lain untuk melakukan ini adalah menggunakan border-image dalam kombinasi dengan linear-gradient.

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>

Luaskan cuplikan

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

Dukungan Browser: IE: 11+

Chrome: semua

Firefox: 15+

Untuk dukungan yang lebih baik juga tambahkan awalan vendor.

caniuse border-image

— Daniel Z.
sumber

5

Ini adalah trik CSS, bukan solusi formal. Saya meninggalkan kode dengan periode hitam karena itu membantu saya memposisikan elemen. Setelah itu, warnai konten Anda (warna: putih) dan (margin-top: -5px atau lebih) untuk membuatnya seolah-olah periode tidak ada.

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

— Justin Munce
sumber

2

Solusi lain adalah Anda bisa menggunakan gambar latar belakang untuk meniru tampilan perbatasan kiri

Buat gaya batas kiri yang Anda butuhkan sebagai grafik
Posisikan di sebelah kiri div Anda (buat cukup lama untuk menangani kira-kira dua peningkatan ukuran teks untuk browser lama)
Atur posisi vertikal 50% dari atas div Anda.

Anda mungkin perlu mengubah untuk IE (seperti biasa) tetapi layak dicoba jika itu adalah desain yang Anda inginkan.

Saya umumnya menentang menggunakan gambar untuk sesuatu yang secara inheren disediakan oleh CSS, tetapi kadang-kadang jika desain membutuhkannya, tidak ada cara lain untuk memperbaikinya.

— Kevin
sumber

1

Anda dapat menetapkan satu batas per sisi saja. Anda harus menambahkan elemen tambahan untuk itu!

— Simon
sumber