Hello everybody, welcome back to Learn Tech Tips channel
Today Topic I will show you “How to make a beautiful Favour Arrow using HTML code”. Like this:
This tech skill using two familiar attribute: border-left, border-top for make it
Let’s go, we’re going to build a frame first, build HTML from craft 😀
On below code we’re using variable on CSS :root { }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Top Right Arrow </title>
<style>
.box {
border: 1px solid black;
width: 300px;
height: 300px;
position: relative;
margin: 100px;
}
.box h3 {
padding: 10px;
}
:root {
--favour-color: orange;
}
</style>
</head>
<body>
<span> </span>
<div class="box">
<h3 class="box__title"> Title </h3>
<div class="box__favour">
Favour
</div>
</div>
</body>
</html>
Above code will show the frames of the code
Now we’re going to build the arrow. Actually the main code for arrow just have below 3 rows, please be note
3 above row meaning is display arrow with orange color with border-top,
position: absolute;
border-top: 10px solid orange;
border-left: 10px solid transparent;
full code here:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Top Right Arrow </title>
<style>
.box {
border: 1px solid black;
width: 300px;
height: 300px;
position: relative;
margin: 100px;
}
.box h3 {
padding: 10px;
}
:root {
--favour-color: orange;
}
.box__favour {
position: absolute;
width: 100px;
background-color: var(--favour-color);
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
padding: 10px;
left: -10px;
top: 10px;
}
.box__favour::after {
content: "";
left: 0;
bottom: -10px;
position: absolute;
border-top: 10px solid var(--favour-color);
border-left: 10px solid transparent;
filter: brightness(60%);
}
</style>
</head>
<body>
<span> </span>
<div class="box">
<h3 class="box__title"> Title </h3>
<div class="box__favour">
Favour
</div>
</div>
</body>
</html>
Any feedback or question about “How to make a beautiful Favour Arrow using HTML Code“, leave your comment on below topic, we can discuss about it!
Relative topic:
Here is the detail video for guide you easy do it with step by step: if you want to make a beautiful Favoid Arrow using HTML. you can take a look on below tiktok video (Learn Tech Tips)
@learntechtips How to build Favour Arrow in HTML #html #favourarrow #sourcecode #learnontiktok #learntechtips #frontend ♬ 一定要爱你 – 腾金涛&歌者凌风&凡离
Learn Tech Tips – Zidane