[Solved] How to make a beautiful Discount Arrow using HTML code

By
Make Money Advisor
-
0
28

Hello everybody, welcome back to Learn Tech Tips channel. If you new here, don’t worry subscribe it for more information on every days

Topic today I will share with you next tech skill for drawing discount arrow, check below gif file so you can see, we will do the discount arrow. Some week ago I had shared with you how to make a beautiful favour Arrow using HTML Code. I you want to check it, you can click here or go down to look relative topic on below this topic

Actually this arrow is easy to do it, no need to use another resource / image from another page, we just use two This is another skill still also using three familiar attribute border-width, border-style, border-color to do it

[Solved] How to make a beautiful Favour Arrow using HTML code (Discount arrow)

Time is gold, please don’t waste it, let’s check out below source for see how to use border-width, border-style, boder-color for make discount arrow

These are my HTML code:

<div class="box">
     <h3 class="box__title"> Iphone </h3>
     <div class="box__discount text-align-center bold align-items-center"> DISCOUNT 30% </div>
</div>

 There are my CSS Code:

.box {

	border: 1px solid black;
        width: 500px;
        height: 500px;
        margin: 100px;
        position: relative;
        background-image: url('/images/iphone.jpg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
}

.box__discount {
	width: 80px;
        height: 80px;
        position: absolute;
        background-color: var(--color);
        padding: 10px;
        color: white;
        right: 0px;
        top: 0px; 
}

.box__discount::after{
	content: "";
        position: absolute;
        right: 0;
        bottom: -50px;
        border-width: 0 50px 50px;
        border-style: solid;
        border-color: transparent var(--color) transparent var(--color);
}

:root {
	--color: red;
}

class box => is the squar inlude the Iphone’s image

class box_discount => the red squar on the right side

class box__discount::after => two bottom of discount items using border-width, border-color, border-style

full source code:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title> Favour Arrow 2 </title>

        <style>
            :root {
                --color: red;
            }

            .box {
                border: 1px solid black;
                width: 500px;
                height: 500px;
                margin: 100px;
                position: relative;
                background-image: url('/images/iphone.jpg');
                background-repeat: no-repeat;
                background-position: center;
                background-size: cover;
            }

            .box__discount  {
                width: 80px;
                height: 80px;
                position: absolute;
                background-color: var(--color);
                padding: 10px;
                color: white;
                right: 0px;
                top: 0px; 
            }

            .box__discount::after{
                content: "";
                position: absolute;
                right: 0;
                bottom: -50px;
                border-width: 0 50px 50px;
                border-style: solid;
                border-color: transparent var(--color) transparent var(--color);
            }

            .text-align-center {
                text-align: center;
            } 

            .bold {
                font-weight: bold;
            }

            .align-items-center {
                display: flex;
                align-items: center;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <h3 class="box__title"> Iphone </h3>
            <div class="box__discount text-align-center bold align-items-center"> DISCOUNT 30% </div>
        </div>
    </body>
</html>



Relative topic:

How to make beautiful favour arrow using html code

How to make beautiful discount arrow using html code

If you have issue for above code, please try on my guideline on tiktok below video

@learntechtips How to make a beautiful Discount arrow in HTML #learntechtips #discountarrow #html #sourcecode #frontend #learncode ♬ WayBackHome – 苏七岁

Here is my detail coding tutorial

If you have any questions or feedback, leave your comment we can discuss about it!!

Learn Tech Tips – Zidane