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

با سلام

با یکی دیگر از مطالب سایت هایپر تمپ با شما هستیم

در این پست کد روبان گوشه ای رو قرار دادیم که میتونید جهت مناسبت ها یا تبلیغات اشتفاده کنید

با سلام

با یکی دیگر از مطالب سایت هایپر تمپ با شما هستیم

در این پست کد روبان گوشه ای رو قرار دادیم که میتونید جهت مناسبت ها یا تبلیغات اشتفاده کنید

ابتدا کد زیر را درون head قالب خود قرار دهید :

<style> .right { float: right; } .hypertemp-wrap { position: relative; left: -41px; top: 49px; width: 150px; -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); border-color: #a00; border-left: 30px solid transparent; border-right: 30px solid transparent; border-bottom: 30px solid #a00; box-shadow: 0px 6px 5px -5px rgba(0, 0, 0, 0.5); z-index: 999; } .hypertemp-wrap.right { left: inherit; right: -41px; top: 19px; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); } .hypertemp-wrap .trap-hypertemp { position: absolute; left: -15px; top: 2px; border-bottom: 1px dotted rgba(255, 255, 255, 0.7); width: 180px; text-align: center; } .hypertemp-wrap .trap-hypertemp a { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 700; color: #d8d8d8; text-decoration: none; text-shadow: 0 -1px rgba(0, 0, 0, 0.5); text-align: center; line-height: 22px; display: inline-block; border-top: 1px dotted rgba(255, 255, 255, 0.7); transition: color 500ms ease; } .hypertemp-wrap .trap-hypertemp a:hover { color: #fff; text-shadow: 0 1px rgba(0, 0, 0, 0.85); }</style>

سپس کد زیر را در جای مناسب وب خود قرار دهید

برای استفاده در گوش راست :

<div class="trap hypertemp-wrap right"> <div class="trap-hypertemp"> <a href="#">www.hypertemp.ir<i class="fa fa-github-alt"></i></a> </div> </div>

برای استفاده در گوشه چپ :

<div class="trap hypertemp-wrap"> <div class="trap-hypertemp"> <a href="#">www.hypertemp.ir <i class="fa fa-github-alt"></i></a> </div> </div>

برای تغییر متن www.hypertemp.ir را ویرایش کنید