Show product discount percent in Magento

try this:

<?php // Discount percents output start 
$_finalPrice=$_product->getFinalPrice(); 
 $_price=$_product->getPrice();

?>
    <?php if($_finalPrice < $_price): ?>
    <?php $_savePercent = 100 - round(($_finalPrice / $_price)*100); ?>
        <img src="image " alt="<?php echo "Discount % ".$_savePercent; ?>" />
    <?php endif; ?>
<?php // Discount percent output end ?>

as i seen in your question image you need this effect on product detail page so have to edit media.phtml

app\design\frontend\YOUR_PACKAGE\YOUR_THEME\default\template\catalog\product\view\media.phtml

And in that you have to do same coding to get this value. you can make wrapper class which is override to product image with some dynamic text over product image like as you want.

you can use css like in this page

http://techdem.centerkey.com/2013/01/ribbon-banner-css-transform-rotate-45.html

hope this will sure help you.

If you wish to show product discount percent next to product price or somewhere on a product page, here's how you do it.

Open app/design/frontend/yourpackage/yourtheme/template/catalog/product/price.phtml & Find:

<?php endif; /* if ($_finalPrice == $_price): */ ?>

Add above it:

<?php // Display Discount percents start ?>
    <?php if($_finalPrice < $_price): ?>
    <?php $_savingPercent = 100 - round(($_finalPrice / $_price)*100); ?>
        <p class="special-price yoursaving">
            <span class="label"><?php echo $this->__('Your Saving:') ?></span>
            <span class="price">
                <?php echo $_savingPercent; ?>%
            </span>
        </p>
    <?php endif; ?>
<?php // Display Discount percent end ?>