সীমানার দৈর্ঘ্য সীমাবদ্ধ করার কোনও উপায়?

Question

সীমানার দৈর্ঘ্য সীমাবদ্ধ করার কোনও উপায় আছে কি? আমার <div>একটি নীচের সীমানা রয়েছে তবে আমি বামদিকে একটি সীমানা যুক্ত করতে চাই <div>যা কেবলমাত্র রাস্তার অর্ধেক প্রসারিত।

পৃষ্ঠায় অতিরিক্ত উপাদান যুক্ত না করে কি করার কোনও উপায় আছে?

Answer 1

আশাকরি এটা সাহায্য করবে:

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

Comments

এটি এখনও এটি করার সর্বোত্তম উপায় বলে মনে হচ্ছে। এটি ক্রস ব্রাউজারটি উপযুক্ত এবং রক্ষণাবেক্ষণে সহজ।

— পিম শ্যাফাফ

চেনাশোনাতে এটি করার কোনও উপায় আছে?

— www139

বৃত্তের জন্য বাক্স-ছায়া প্রয়োগ করুন।

— পীযূষ ধোলারিয়া

এটিতে প্রাচীন ব্রাউজারগুলির তুলনায় প্রান্তিক ক্রস ব্রাউজারের সামঞ্জস্যতা সুবিধা থাকতে পারে এবং জেএসের মাধ্যমে নিয়ন্ত্রণ করা সহজ ... তবে এগুলির দুটিই মূল প্রশ্নের উদ্বেগ নয়। তবে এটি মার্কআপে অতিরিক্ত উপাদান যুক্ত করে যা মূল প্রশ্নটি বিশেষত এড়াতে বলে। সুতরাং আমি কেন বুঝতে পারি না এটি কেন এই প্রশ্নের গৃহীত উত্তর।

— স্পেন্সার ও'রিলি

এটি দিয়ে: এর পরে কোনও অতিরিক্ত মার্কআপের প্রয়োজন হবে না

— মার্ক

Answer 2

সিএসএস উত্পন্ন সামগ্রী আপনার জন্য এটি সমাধান করতে পারে:

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>

(দ্রষ্টব্য - content: "";ছদ্ম উপাদানটি রেন্ডার করার জন্য ঘোষণাপত্রটি প্রয়োজনীয়)

Comments

আমি মনে করি এটি শব্দার্থগতভাবে একটি আরও ভাল বিকল্প, কারণ এটি অতিরিক্ত ডিভগুলি প্রবর্তন করে না।

— লুইস অটো

এটি গ্রহণযোগ্য উত্তর হওয়া উচিত কারণ এটি মার্কআপের উপরে স্টাইলিংয়ের একক উপায় হিসাবে সিএসএসের পক্ষে।

— লুকাশ

পারফেক্ট। এবং এটি প্যাডিং এবং মার্জিনের সাথেও প্রত্যাশার মতো কাজ করে।

— নোলোনার

মনে রাখবেন: আপনি জেএস থেকে ছদ্ম-উপাদান বৈশিষ্ট্যগুলি পরিচালনা করতে পারবেন না (আসলে আপনি এটি করতে পারেন তবে এটি খুব হ্যাকি হবে)। সুতরাং আপনি যদি এই সমাধানটি দিয়ে এক ধরণের অগ্রগতি-বার করার পরিকল্পনা করে থাকেন - তবে ভুলে যান। ইতিমধ্যে গৃহীত উত্তর চয়ন করুন। অন্য সমস্ত ক্ষেত্রে এই উত্তরটি ভাল, এটি সত্য।

— সের্গেই পানফিলভ

এই ক্রস ব্রাউজার এবং / অথবা জেএস সামঞ্জস্যপূর্ণ? @ সের্গেইপানফিলভের মন্তব্যের কারণে আমি গৃহীত উত্তরটি পছন্দ করি।

— ম্যাথিউয়াস

Answer 3

দ্য :afterশিলা :)

আপনি যদি কিছুটা খেলেন তবে আপনি নিজের আকার পরিবর্তনকারী সীমান্ত উপাদানকে কেন্দ্রিক উপস্থিত হতে বা তার পাশের আরও কিছু উপাদান (মেনুগুলির মতো) উপস্থিত থাকলেই উপস্থিত হতে সেট করতে পারেন। একটি মেনু সহ এখানে একটি উদাহরণ:

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

Comments

আপনি কি এইচটিএমএল নমুনা যুক্ত করতে পারেন? আপনি টেবিল সেল, কিছু ক্লু দিয়ে এটি কীভাবে ব্যবহার করবেন বলে মনে করেন?

— পিটার ক্রাউস

Answer 4

সিএসএস বৈশিষ্ট্য সহ, আমরা কেবল সীমানার বেধ নিয়ন্ত্রণ করতে পারি; দৈর্ঘ্য নয়

তবে আমরা সীমান্তের প্রভাব নকল করতে পারি এবং এর নিয়ন্ত্রণ করতে পারি widthএবং heightআমরা অন্যান্য কিছু উপায়ে চাই want

সিএসএস সহ (লিনিয়ার গ্রেডিয়েন্ট):

আমরা linear-gradient()একটি পটভূমি চিত্র (গুলি) তৈরি করতে এবং এর আকার এবং অবস্থান সিএসএসের সাথে নিয়ন্ত্রণ করতে ব্যবহার করতে পারি যাতে এটি সীমানার মতো লাগে। যেহেতু আমরা কোনও উপাদানটিতে একাধিক পটভূমি চিত্র প্রয়োগ করতে পারি, আমরা এই বৈশিষ্ট্যটি একাধিক সীমানা চিত্রের মতো তৈরি করতে এবং উপাদানটির বিভিন্ন দিকে প্রয়োগ করতে পারি। আমরা কিছু শক্ত রঙ, গ্রেডিয়েন্ট বা পটভূমি চিত্র সহ অবশিষ্ট উপলব্ধ অঞ্চলটিও coverেকে দিতে পারি।

প্রয়োজনীয় এইচটিএমএল:

আমাদের কেবলমাত্র একটি উপাদান প্রয়োজন (সম্ভবত কিছু বর্গ রয়েছে)।

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

পদক্ষেপ:

1. এর সাথে পটভূমি চিত্র (গুলি) তৈরি করুন linear-gradient() ।
2. / background-sizeসামঞ্জস্য করতে ব্যবহার করুনwidthheight উপরে নির্মিত ইমেজ (গুলি) যাতে এটি একটি সীমানা মত দেখায়।
3. ব্যবহারের background-positionঅবস্থান (যেমন সমন্বয় left, right, left bottomনির্মিত সীমান্ত উপরে (গুলি) ইত্যাদি)।

প্রয়োজনীয় সিএসএস:

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

উদাহরণ:

সঙ্গে linear-gradient() আমরা একরঙা সীমানা সেইসাথে থাকার গ্রেডিয়েন্ট তৈরি করতে পারেন। নীচে এই পদ্ধতিটি দিয়ে তৈরি সীমান্তের কয়েকটি উদাহরণ দেওয়া আছে।

কেবল একদিকে সীমানা যুক্ত উদাহরণ:

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

সীমানা দুটি উদাহরণ প্রয়োগ:

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

চারদিকে প্রয়োগ করা সীমানা সহ উদাহরণ:

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

স্ক্রীনশট:

Answer 5

অনুভূমিক রেখার জন্য আপনি hr ট্যাগ ব্যবহার করতে পারেন:

hr { width: 90%; }

তবে সীমানা উচ্চতা সীমাবদ্ধ করা সম্ভব নয়। শুধুমাত্র উপাদান উচ্চতা।

Comments

হ্যাঁ, এখানে "প্রস্থ" হ'ল "এইচআর লাইনের দৈর্ঘ্য"। সীমানা-প্রস্থের মতো কোনও কিছুর জন্য এইচআর বৈশিষ্ট্য আকার বা সিএসএস ব্যবহার করুন height। একটি টিডি ট্যাগ ব্যবহারে ঘর বর্ডার প্রতিস্থাপনের জন্য <td>your content<hr/></td>।

— পিটার ক্রাউস

Answer 6

সীমানা কেবল প্রতি পার্শ্বে সংজ্ঞায়িত করা হয়, কোনও পক্ষের ভগ্নাংশে নয়। সুতরাং, না, আপনি এটি করতে পারবেন না।

এছাড়াও, কোনও নতুন উপাদান সীমানা হবে না, এটি কেবল আপনার পছন্দসই আচরণ নকল করবে - তবে এটি এখনও একটি উপাদান হবে।

Answer 7

এটি করার আর একটি উপায় হ'ল লিনিয়ার-গ্রেডিয়েন্টের সাথে মিলিয়ে সীমানা-চিত্র ব্যবহার করা।

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>

জেএসফিডাল: https://jsfiddle.net/u7zq0amc/1/

---

ব্রাউজার সমর্থন: আইই: 11+

ক্রোম: সব

ফায়ারফক্স: 15+

আরও ভাল সহায়তার জন্য বিক্রেতার উপসর্গগুলিও যুক্ত করুন।

ক্যানিয়েজ বর্ডার ইমেজ

Answer 8

এটি একটি সিএসএস কৌশল, কোনও আনুষ্ঠানিক সমাধান নয়। আমি পিরিয়ডকে কালো রেখে কোডটি রেখেছি কারণ এটি আমাকে উপাদানটি অবস্থান করতে সহায়তা করে। এরপরে, আপনার সামগ্রীটি (রঙ: সাদা) এবং (মার্জিন-শীর্ষ: -5px বা তাই) রঙ করুন যাতে এটি সময়কাল নেই।

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

Answer 9

আর একটি সমাধান হ'ল আপনি বাম সীমান্তের চেহারা নকল করতে পটভূমি চিত্র ব্যবহার করতে পারেন

1. গ্রাফিক হিসাবে আপনার প্রয়োজনীয় সীমানা-বাম শৈলী তৈরি করুন
2. আপনার ডিভের একেবারে বাম দিকে এটি অবস্থান করুন (পুরানো ব্রাউজারগুলির জন্য প্রায় দুটি পাঠ্যের আকার বাড়ানোর জন্য এটি যথেষ্ট দীর্ঘ করুন)
3. আপনার ডিভের শীর্ষ থেকে 50% উলম্ব অবস্থান নির্ধারণ করুন।

আপনার জন্য আইআই এর জন্য টুইঙ্ক করার প্রয়োজন হতে পারে (যথারীতি অনুযায়ী) তবে এটি যদি আপনি ডিজাইনের জন্য চলে যাচ্ছেন তবে এটির দাম খুব ভাল।

• সিএসএস অন্তর্নিহিতভাবে সরবরাহ করে এমন কোনও কিছুর জন্য আমি সাধারণত চিত্রগুলি ব্যবহারের বিপক্ষে, তবে কখনও কখনও ডিজাইনের যদি এটির প্রয়োজন হয় তবে এটির চারপাশে অন্য কোনও উপায় নেই।

Answer 10

আপনি কেবল প্রতি পার্শ্বে একটি সীমানা নির্ধারণ করতে পারেন। আপনাকে এটির জন্য একটি অতিরিক্ত উপাদান যুক্ত করতে হবে!