ورود

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 رو یادم رفته بود :لبخند: