كيف يمكنني عمل border-left داخلي مثل الصورة التالية باستخدام CSS ؟

Muhannad Bahurmoz · 21 فبراير

السلام عليكم ورحمة الله وبركاته,

أحاول تطبيق مثل الشكل الذي في الصورة التالية:

وهذه النتيجة الذي توصلت إليها:

وكما ترون ال border-left يختلف بين الصورتين,

كيف يمكنني أن أجعل ال border-left مثل الصورة الأولى باستخدام CSS فقط ؟

علمًا بأن الصورتين لديهم نفس شيفرات HTML,

وشكرًا لكم

Mustafa Suleiman · 21 فبراير

بشكل بسيط، نقوم بإنشاء عنصر أب كحاوية container ثم بداخله نضع عنصر آخر ليحتوي النص ونضع له إطار من اليسار ثم padding كالتالي:

<!DOCTYPE html>
<html>

<head>
    <title>Page Title</title>
</head>

<body>
    <div class="quote">
        <div class="quote_text">"this is important"</div>
    </div>
</body>

</html>

CSS:

.quote{
    background-color: rgb(192, 192, 192);
padding: 10px;
}

.quote_text{
    border-left: 5px solid purple;
    padding: 10px;
}

ياسر مسكين · 21 فبراير

هناك عدة طرق لتحقيق تلك النتيجة باستخدام CSS مثلا هنا قمت باستخدام الخاصية `::before` وتكون بهذا الشكل:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Border Left and Padding Example</title>

    <link rel="stylesheet" href="styles.css"> <!-- ربط ملف الـ CSS -->

</head>

<body>

    <div class="container">

        <div class="content">

            <p>This is a text inside the container.</p>

        </div>

    </div>

</body>

</html>

وهذا ملف ال CSS (styles.css):

.container {

    padding: 20px; /* تعيين التباعد للعنصر الأب */

}



.content {

    position: relative; /* جعل العنصر يحتوي على عناصر متوازية */

}



.content::before {

    content: ''; /* إنشاء عنصر قبل العنصر الفرعي */

    position: absolute; /* تحديد الموقع المطلوب */

    left: 0; /* تحديد الموضع من اليسار */

    top: 0; /* تحديد الموضع من الأعلى */

    height: 100%; /* تعيين الارتفاع ليمتد على ارتفاع العنصر الفرعي */

    width: 5px; /* تعيين العرض للحد الأيسر */

    background-color: #000; /* تعيين لون الحد */

}

ففي هذا المثال يتم تعيين `position: relative` على العنصر الفرعي لجعل `::before` يعتمد على موقعه. ثم يتم استخدام `position: absolute` لتحديد موقع الحد الأيسر بالنسبة إلى العنصر الفرعي، وتحديد عرضه ولونه على حسب الرغبة.

Hossam Mohamed15 · 22 فبراير

يجب ان تدرك ان ال border يحيط بحدود الشكل، وعند تحليل الصورتين أجد انك طبقت ال border على المستطيل الخارجي الذي يحتوي على النص، ولكن المطلوب هو انشاء border لعنصر داخل هذا المستطيل الخارجي، ولتحقيق هذا عليك انشاء عنصر div داخلي
للتوضيح :

<div class="outer">
  <div class="inner">
    <p>This is an Important Note!</p>
  </div>
</div>

ومن ثم تطبيق قواعد ال css المناسبة

.outer{
	background:#eee;
	padding: 5px 10px; 
}
.inner{
	border-left: 3px solid red;
	padding: 5px;
}

بعدها يمكنك التلاعب بقيمة ال padding وال border-width كما تريد لتحقيق النتيجة المطلوبة.

-

Najah Alsaker · 22 فبراير

في البداية دعني اوضح لك الكود الذي استخدمته

<!DOCTYPE html>
<html>

<head>
    <title>Page Title</title>
</head>
<style>
.parent{
    background-color: rgb(232, 232, 232);
    width: 40%;
}
.child{
    border-left: 5px solid purple;
    padding: 10px;
}
</style>
<body>
    <div class="parent">
        <div class="child">This is important Note</div>
    </div>
</body>
</html>

هذا الكود يقوم باعطاء نفس النتيجة التي ظهرت لديك هذه

وكما تلاحظ ان المشكلة لديك في ال border-left لذلك من المنطقي ان نقوم بتعديل هذا الجزء

المشكلة هي اننا نريد لهذا الborder ان يبتعد قليلا عن اطار هذا العنصر من الاعلى والاسفل واليسار , لذلك دعنا نضيف هذا الكود الذي يقوم بهذه المهمة

   padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;

ليصبح كود ال css النهائي هكذا

.parent{
    background-color: rgb(232, 232, 232);
    width: 30%;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
}
.child{
    border-left: 5px solid purple;
    padding: 10px;
}

والنتيجة كالتالي :

image.png.e04e7cfabb7eb4f17f9d8c407a181c25.png

والان ما ينقصنا هو تغيير نوع الخط , ولتقم بتغييره اتبع الخطوات التالية :

قم بالدخول الى google fonts من هنا
اختر الخط الذي يناسبك وقم بالضغط عليه
ثم اضغط على get font للحصول على المعلومات الللازمة لاضافة هذا الخط لمشروعنا

ثم اضغط هنا

والان نختار التالي : لنقم بتضمينه داخل ملف ال css

قم بنسخ الكود الاول الخاص بالتضمين في بداية ملف ال css

اما الكود الثاني ف قم باضافته داخل العنصر child ليقوم بتغيير الخط

انا اخترت لك هذا الخط لانني لاحظت انه اكثر خط شبيه للذي تريده ويمكنك اختيار ما تريد من الموقع

والان هذا هو الكود النهائي بعد التعديل واضافة الخط

<!DOCTYPE html>
<html>

<head>
    <title>Page Title</title>
</head>
<style>
  /* رابط تضمين الخط */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

.parent{
    background-color: rgb(232, 232, 232);
    width: 30%;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    /* تنسيقات الخط */
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: weight;
    font-style: normal;
}
.child{
    border-left: 5px solid purple;
    padding: 10px;
}
</style>
<body>
    <div class="parent">
        <div class="child">This Is Important Note</div>
    </div>
</body>
</html>

وهذه النتيجة النهائية

بالتوفيق لك

تم التعديل في 22 فبراير بواسطة Najah Alsaker

كيف يمكنني عمل border-left داخلي مثل الصورة التالية باستخدام CSS ؟

السؤال

Muhannad Bahurmoz

4 أجوبة على هذا السؤال

Recommended Posts

Mustafa Suleiman

ياسر مسكين

Hossam Mohamed15

Najah Alsaker

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية