barzin144
جمعه 06 دی 1392, 10:24 صبح
http://justserial.ir/test/1.jpg
برای ایجاد مثلث زیر div از این کد استفاده میکنیم:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
.divMain {
background-color: red;
width: 200px;
height: 100px;
margin: 50px auto 0 auto;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
-khtml-border-radius: 5px;
}
.triangle {
border-top: 20px solid red;
border-right: 20px solid transparent;
border-left: 20px solid transparent;
border-bottom: 20px solid transparent;
width: 0px;
height: 0px;
margin: 0 auto 0 auto;
}
</style>
</head>
<body>
<div class='divMain'></div>
<div class='triangle'></div>
</body>
</html>
همون طور در کد مشخص است کلاس divMain برای دیو بالایی است و کلاس triangle برای ایجاد مثلث است که ترفندش دادن border به div با طول و عرض 0 است با تغییر مقدار اندازه border مثلث کوچکتر یا بزرگتر میشود ، برای ایجاد مثلثی که از پایین به div بچسبد فقط border بالا را رنگی میکنیم و بقیه را بی رنگ قرار میدهیم و همچنین برای مثلثی که بالا باشد border پایین رنگی و .... با تنظیم margin برای divmain مثلث را به div خود میچسبانیم.
برای ایجاد مثلث زیر div از این کد استفاده میکنیم:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
.divMain {
background-color: red;
width: 200px;
height: 100px;
margin: 50px auto 0 auto;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
-khtml-border-radius: 5px;
}
.triangle {
border-top: 20px solid red;
border-right: 20px solid transparent;
border-left: 20px solid transparent;
border-bottom: 20px solid transparent;
width: 0px;
height: 0px;
margin: 0 auto 0 auto;
}
</style>
</head>
<body>
<div class='divMain'></div>
<div class='triangle'></div>
</body>
</html>
همون طور در کد مشخص است کلاس divMain برای دیو بالایی است و کلاس triangle برای ایجاد مثلث است که ترفندش دادن border به div با طول و عرض 0 است با تغییر مقدار اندازه border مثلث کوچکتر یا بزرگتر میشود ، برای ایجاد مثلثی که از پایین به div بچسبد فقط border بالا را رنگی میکنیم و بقیه را بی رنگ قرار میدهیم و همچنین برای مثلثی که بالا باشد border پایین رنگی و .... با تنظیم margin برای divmain مثلث را به div خود میچسبانیم.