خط افقی با Css

[mahdivita]

سلام
میخوام یک خط افقی با Css رسم کنم که انتهای خط باریک تر از جاهای دیگه ی خط باشه و اون خط فقط وسط صفحه باشه یعنی یک خط افقی در کل صفحه نباشه
لطفا راهنمایی کنین
با hr کردم خوب نشد

[سعید کشاورز]

فکر.کنم با خاصیت border-bottom کارت راه بیوفته

[mahdivita]

میشه کدش رو بنویسید ممنون

[2undercover]

شاید زیاد جالب در نیاد ولی اینطوری:

#Line
{
width: 0px;
border-style: solid;
border-top: solid 10px black;
border-bottom: solid 0px transparent;
border-right: solid 350px transparent;
height: 0px;
}

[SlowCode]

تو اون یکی تاپیک یکی از دوستان اینو گذاشت، فکر کنم همونی باشه که میخوای.

hr {
border: 0;
height: 2px;
margin:18px 0;
position:relative;
background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 10%, rgba(0,0,0,0.65) 50%, rgba(0,0,0,0) 90%, rgba(0,0,0,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0)), color-stop(10%,rgba(0,0,0,0)), color-stop(50%,rgba(0,0,0,0.65)), color-stop(90%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 10%,rgba(0,0,0,0.65) 50%,rgba(0,0,0,0) 90%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 10%,rgba(0,0,0,0.65) 50%,rgba(0,0,0,0) 90%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 10%,rgba(0,0,0,0.65) 50%,rgba(0,0,0,0) 90%,rgba(0,0,0,0) 100%); /* IE10+ */
background: linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 10%,rgba(0,0,0,0.65) 50%,rgba(0,0,0,0) 90%,rgba(0,0,0,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 */
}

hr:before {
content: "";
display: block;
border-top: solid 1px #f9f9f9;
width: 100%;
height: 1px;
position: absolute;
top: 50%;
z-index: 1;
}

[mahdivita]

سلام
این خوبه خیلی ممنون ولی نمیشه کاری کرد که اون انتهاش که نازک میشه سفید نباشه یعنی کلا محو باشه؟؟؟؟
و یک سئوال دیگه این که میشه کوچیک تر کرد ؟؟؟؟؟؟

[elahe471]

hr {
border: 0;
height: 1px;
background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0));
width:500px;
}

[mahdivita]

ممنون همین رو میخواستم

[mahdivita]

یک سئوال الان این درسته اما وسط صفحه یک خط سفید طولانی ظاهر شده به رنگ سفید چرا؟؟؟؟؟؟
کمک :گریه:

[elahe471]

وسط صفحه ؟ اونجا هم hr دارین ؟ :متفکر: فکر نکنم مشکلش این باشه ، رو Browser (فایرفاکس یا کروم ) کلیک راست کنید ، Inspect Element بگیرید ببینید خط سفیده از کدوم کلاس CSS داره استفاده میکنه

[mahdivita]

مشخص نیستش از چیه
این کد چیه؟؟؟

hr:before {
content: "";
display: block;
border-top: solid 1px #f9f9f9;
width: 100%;
height: 1px;
position: absolute;
top: 50%;
z-index: 1;
}

من الان این کد رو پاک کردم هم اون خطی که خودم میخواستم هست و هم اون خط سفید حذف شده
اگه کد مهمی نیست پاک کنم کلا

[elahe471]

بله پاک کنید این ادامه کدی هست که محسن 15 گذاشتن و شما پاک نکردین

[mahdivita]

مر30 :تشویق: