dr-wp

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

11 پست در این موضوع قرار دارد


http://css-tricks.com/examples/ShapesOfCSS/

4

به اشتراک گذاری این پست


لینک به پست

سلام

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

0

به اشتراک گذاری این پست


لینک به پست

سلام ،

چک کنید:

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>

7

به اشتراک گذاری این پست


لینک به پست

ممنون ازتون ولی یه مشکل

این کد فقط تو مرورگر کروم درست نمایش داده میشه بقیه مرورگر ها درست نمایش داده نمیشه

0

به اشتراک گذاری این پست


لینک به پست

ممنون ازتون ولی یه مشکل

این کد فقط تو مرورگر کروم درست نمایش داده میشه بقیه مرورگر ها درست نمایش داده نمیشه!!!

0

به اشتراک گذاری این پست


لینک به پست

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

1

به اشتراک گذاری این پست


لینک به پست

سلام

این خیلی داغون تر شده :wacko:

0

به اشتراک گذاری این پست


لینک به پست

سلام

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

سلام

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


background:none;

0

به اشتراک گذاری این پست


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری