فرهاد

5 سال پیش توسط فرهاد مطرح شد

متوازی الضلاع در css

سلام من میخوام یه متوازی الضلاع بسازم توی button
ولی وقتی از transform: skew استفاده میکنم متن هم کشیده میشه ولی من چنین چیزی رو نمیخوام 👇👇👇

توضیح تصویر رو وارد کنید

من میخوام متن اینجوری نشه
اگه راه حلی دارید بگید ممنون میشم

ثبت پرسش جدید

میلاد-م

تخصص : توسعه‌دهنده رابط کاربری - Fron...

@milad 5 سال پیش آپدیت شد

یک راه حل اینه که متن رو بر خلاف درجه خود عنصر دکمه، کج کنید:

 <!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>btn parallelogram</title>
    <style>
        .btn {
            padding: 12px 20px;
            font-size: 18px;
            background-color: purple;
            transform: skew(-12deg);
        }
        .btn__text {
            transform: skew(12deg);
        }
    </style>
</head>
<body>
    <button class='btn'>
        <div class='btn__text'>کلیک کنید</div>
    </button>
 
</body>
</html>

ارسال پاسخ

سینا شاه‌اویسی

تخصص : برنامه نویس فرانت اند

@sinashahoveisi 5 سال پیش مطرح شد

سلام به این صورت میشود :

 <!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
a.button_link{
  box-sizing: border-box;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  display: inline-block;
  position: relative;
  padding: 15px 20px;
  margin: 40px 40px;
  background: linear-gradient(to right, #a200ff, #894cff);
  transition: background-color 0.3s;
  transform: skew(-20deg);
}
a.button_link:after{
  content:'';
  display: inline-block;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: absolute;
  background: transparent;
  z-index: -1;
  transition: all .3s;
}
a.button_link:hover:after{
  background: #894cff;
}
a.button_link>.name{
  display: inline-block;
  transform: skew(20deg); 
}
a.button_link:before{
  content:'';
  width: 2px;
  height: 90%;
  display: inline-block;
  top: -10px;
  left: 10px;
  position: absolute;
  background: #fff;
  z-index: 1;
  transition: all .3s;
}
a.button_link:hover:before{
  background: #894cff;
  top: 0;
  height: 100%;
}
a.button_link.blue{
  background: linear-gradient(to right, #63a4ff, #1976d2);
}
a.button_link.blue:hover:after{
  background: #1976d2;
}
a.button_link.blue:hover:before{
  background: #1976d2;
}
</style>
</head>
<body>
 
<a href="#" class="button_link blue">
  <span class="name">Hello</span>
</a>
 
</body>
</html>

ارسال پاسخ

میلاد-م

تخصص : توسعه‌دهنده رابط کاربری - Fron...

@milad 5 سال پیش مطرح شد

@sinashahoveisi
این شبه عناصری (before, after) که در کدهاتون قرار دادین به چه کاری میان؟
روی متوازی الاضلاع که تاثیری ندارند، کاربردشون چیه؟

ارسال پاسخ

سینا شاه‌اویسی

تخصص : برنامه نویس فرانت اند

@sinashahoveisi 5 سال پیش مطرح شد

@milad
انمیشن و اون خط که بالا پایین میشه. میتونید حذف کنید.

ارسال پاسخ

میلاد-م

تخصص : توسعه‌دهنده رابط کاربری - Fron...

@milad 5 سال پیش مطرح شد

@sinashahoveisi
ممنون از توضیحتون 👍

ارسال پاسخ

سینا شاه‌اویسی

تخصص : برنامه نویس فرانت اند

@sinashahoveisi 5 سال پیش مطرح شد

@milad
خواهش میکنم.

ارسال پاسخ

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام

دوره‌های آموزشی

مسیرهای یادگیری

پیشرفت من

دوره‌های رایگان

گواهی پایان دوره

محبوب‌ترین آموزش‌ها

متوازی الضلاع در css

گزینش سوالات

گفت و گو های مرتبط

دسته ‌بندی سوالات

تگ‌های محبوب

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport"
	content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>btn parallelogram</title>
	<style>
	.btn {
	padding: 12px 20px;
	font-size: 18px;
	background-color: purple;
	transform: skew(-12deg);
	}
	.btn__text {
	transform: skew(12deg);
	}
	</style>
	</head>
	<body>
	<button class='btn'>
	<div class='btn__text'>کلیک کنید</div>
	</button>

	</body>
	</html>

	<!DOCTYPE html>
	<html>
	<head>
	<title>Page Title</title>
	<style>
	a.button_link{
	box-sizing: border-box;
	color: #fff;
	text-decoration: none;
	text-transform: uppercase;
	display: inline-block;
	position: relative;
	padding: 15px 20px;
	margin: 40px 40px;
	background: linear-gradient(to right, #a200ff, #894cff);
	transition: background-color 0.3s;
	transform: skew(-20deg);
	}
	a.button_link:after{
	content:'';
	display: inline-block;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	position: absolute;
	background: transparent;
	z-index: -1;
	transition: all .3s;
	}
	a.button_link:hover:after{
	background: #894cff;
	}
	a.button_link>.name{
	display: inline-block;
	transform: skew(20deg);
	}
	a.button_link:before{
	content:'';
	width: 2px;
	height: 90%;
	display: inline-block;
	top: -10px;
	left: 10px;
	position: absolute;
	background: #fff;
	z-index: 1;
	transition: all .3s;
	}
	a.button_link:hover:before{
	background: #894cff;
	top: 0;
	height: 100%;
	}
	a.button_link.blue{
	background: linear-gradient(to right, #63a4ff, #1976d2);
	}
	a.button_link.blue:hover:after{
	background: #1976d2;
	}
	a.button_link.blue:hover:before{
	background: #1976d2;
	}
	</style>
	</head>
	<body>

	<a href="#" class="button_link blue">
	<span class="name">Hello</span>
	</a>

	</body>
	</html>