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)](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjcGcMFmHl39q94nrIdhd9swnNTm2ql94Onvo4oRgaBpVkQv9fvluxrfVLLfqiXTQFILBPkobT4KSlWSX9KY45t2viXkxuLld3vh-cvl_pmVswPWeMIjGZ8Xn-HAQSso2jsLXm-TjDjZ4IwCAz-xX_Or6pabva-h8nqGvzeV7pYTm4-taRXUqJwpQp/s644/Arrow%202.gif "[Solved] How to make a beautiful Favour Arrow using HTML code (Discount arrow) - Learn Tech Tips - Zidane")
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;
}
.:root {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);
}
--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
