View Full Version : راهنمایی برای طراحی این طرح
mohammad425
جمعه 13 آذر 1394, 10:44 صبح
سلام دوستان
این طرح رو چجوری میتونم طراحی کنم؟ منظورم قسمت قرمز رنگ هست که به صورت کج قرار گرفته...
137222
saadatieathar
جمعه 13 آذر 1394, 11:19 صبح
این لینک ها رو ببین
http://www.cssportal.com/css3-shapes/
http://css-tricks.com/examples/ShapesOfCSS/
دانیال دزفولی
جمعه 13 آذر 1394, 13:31 عصر
درمورد rotate توی css3 تحقیق کنید
پیام حیاتی
جمعه 13 آذر 1394, 14:22 عصر
سلام دوستان
این طرح رو چجوری میتونم طراحی کنم؟ منظورم قسمت قرمز رنگ هست که به صورت کج قرار گرفته...
137222
روی این کار کنید :
@charset "utf-8";
/* CSS Document */
.rec-1
{
width:150px;
height:300px;
background-color:#CCC;
overflow:hidden;
}
.rec-2
{
width:200px;
height:100px;
background-color:#F00;
-ms-transform: rotate(7deg); /* IE 9 */
-webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
transform: rotate(-40deg);
margin-top:-25px;
margin-left:-50px;
}
<body>
<div class="rec-1">
<div class="rec-2"></div>
</div>
</body>
نتیجه :
137226
mohammad425
جمعه 13 آذر 1394, 19:28 عصر
ممنون, درسته...
overflow:hidden رو یادم رفته بود :لبخند:
vBulletin® v4.2.5, Copyright ©2000-1404, Jelsoft Enterprises Ltd.