ایجاد دکمه مثلثی با سایه توسط CSS

برای ایجاد یک دکمه به صورت مثلث به صورت زیر اقدام می کنیم.

استفاده از سمبل ها:

کاراکتر هایی مثل زیر در یونیکد وجود دارد. ▲▼◀▶ البته شما می توانید به جای مثلث از سمبل های دیگری هم استفاده کنید. برای دریافت این سمبل ها به این سایت مراجعه کنید.

کد HTML:

<span class="triangle">▲</span>

کد CSS:

.triangle {
color: #BADA55;
text-shadow: 0 0 20px black;
}
/* سایه مثلث */
span {
display: inline-block;
transform: scaleX(2.5);
color: #BADA55;
text-shadow:
0 2px 2px rgba(255,255,255,0.7),
0 10px 4px rgba(0,0,0,0.5);
font-size: 32px;
}
/*رویداد قرار گیری ماوس رو مثلث*/
span:hover {
transition: all 0.2s ease;
transform: scaleX(2.5) translateY(4px);
text-shadow:
0 1px 1px rgba(0,0,0,0.5);
}
body {
padding: 20px;
}

مشاهده دمو:

لطفا ماوس را روی تصویر زیر قرار دهید. البته این روش اشکالاتی هم دارد برای مثال CSS3 در مرورگرهایی که جدید هستند کار می کند و یا ممکن است بعضی از مرورگرها از سمبل ها پشتیبانی نکنند و بنابراین این روش همیشه کارآمد نمی باشد. به همین منظور روش دومی هم ارائه دادیم که به صورت زیر می باشد.

کد HTML:

<div class="triangle-with-shadow"></div>

کد CSS:

/*مثلث با سایه*/
.triangle-with-shadow {
width: 100px;
height: 100px;
position: relative;
overflow: hidden;
box-shadow: 0 16px 10px -17px rgba(0,0,0,0.5);
}
.triangle-with-shadow:after {
content: "";
position: absolute;
width: 50px;
height: 50px;
background: #999;
transform: rotate(45deg);
top: 75px;
left: 25px;
box-shadow: -1px -1px 10px -2px rgba(0,0,0,0.5);
}
.triangle-with-shadow:hover, .triangle-with-shadow:hover:after {
box-shadow: none;
}