رفتن به مطلب

8ضلعی با سی اس اس


پست های پیشنهاد شده

سلام ،

چک کنید:

http://codepen.io/N3los/pen/Cywdc


<style>
.outter:before,
.outter:after,
.inner:before,
.inner:after { background: #179; }
.inner { border-color: #179 }


body {
background-size: cover;
}
.holder {
height: 1000px;
}

h1 {
text-align: center;
font-size: 1em;
}

.outter {
position: fixed;
top: 100px;
left: 45%;
width: 200px;
height: 200px;
overflow: hidden;
z-index: 10;
}

.outter:before,
.outter:after {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 2px;

height: 86px;
margin-top: -41px;
z-index: 1;
}

.outter:after {
left: auto;
right: 0;
margin-top: -45px;
height: 92px;
}

.inner {
position: absolute;
top: 0px;
width: 200px;
height: 200px;
background: rgba(255,255,255,.25);
border-width: 2px;
border-style: solid;
-webkit-transform: rotate(45deg);
}

.inner:before,
.inner:after {
-webkit-transform: rotate(45deg);
content: "";
position: absolute;
width: 2px;

height: 85px;
margin-top: -41px;
z-index: 1;
right: auto;
left: 27px;
bottom: auto;
top: 27px;
}

.inner:after {
height: 90px;
right: 30px;
left: auto;
bottom: -13px;
top: auto;
}

p {
text-align: center;
line-height: 145px;
position: relative;
z-index: 10;
font-size: 30px;
font-weight: bold;
}
</style>




<div class="outter">
<p>متن شما</p>
<div class="inner">
</div>
</div>

لینک به ارسال

<style>
p {
text-align: center;
line-height: 50px;
position: relative;
z-index: 10;
}
#octagon {
color:white;
width: 100px;
height: 100px;
background: red;
position: relative;
}

#octagon:before {
content: "";
position: absolute;
top: 0;
left: 0;
border-bottom: 29px solid red;
border-left: 29px solid #fff;
border-right: 29px solid #fff;
width: 42px;
height: 0;
}

#octagon:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
border-top: 29px solid red;
border-left: 29px solid #fff;
border-right: 29px solid #fff;
width: 42px;
height: 0;
}
</style>
<div id="octagon"><p>test mikonam</p></div>

لینک به ارسال

سلام

اونو دیدم اما من میخوام تو خالی باشه و یه border فقط داشته باشه

سلام

برای اینکه بک گراند نداشته باشه از کد زیر استفاده کن :


background:none;

لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...