Background
Break News
How to add local font to Tailwind Css and NextJS? - Tutorial Design Pattern? - Blockchain Technology, How to create own Bitcoin virtual currency - Zustand mordern management state - Design Pattern - Flyweight Pattern? - Docker Full training Topic

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

Monday 28 March 2022
|
Read: Completed in minutes

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

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

How to make a beautiful Favour Arrow using HTML code


 



Let's go, we're going to build a frame first, build HTML from craft :D


Tiktok 



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>

 

How to make a beautiful Favour Arrow using HTML code


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


🙇🏼🙇🏼 Your Feedback Is Valuable and Helpful to Us - Webzone, all things Tech Tips web development Zidane
Popular Webzone Tech Tips topic maybe you will be like it - by Webzone Tech Tips - Zidane
As a student, I found Blogspot very useful when I joined in 2014. I have been a developer for years . To give back and share what I learned, I started Webzone, a blog with tech tips. You can also search for tech tips zidane on Google and find my helpful posts. Love you all,

I am glad you visited my blog. I hope you find it useful for learning tech tips and webzone tricks. If you have any technical issues, feel free to browse my posts and see if they can help you solve them. You can also leave a comment or contact me if you need more assistance. Here is my blog address: https://learn-tech-tips.blogspot.com.

My blog where I share my passion for web development, webzone design, and tech tips. You will find tutorials on how to build websites from scratch, using hot trends frameworks like nestjs, nextjs, cakephp, devops, docker, and more. You will also learn how to fix common bugs on development, like a mini stackoverflow. Plus, you will discover how to easily learn programming languages such as PHP (CAKEPHP, LARAVEL), C#, C++, Web(HTML, CSS, javascript), and other useful things like Office (Excel, Photoshop). I hope you enjoy my blog and find it helpful for your projects. :)

Thanks and Best Regards!
Follow me on Tiktok @learntechtips and send me a direct message. I will be happy to chat with you.
Webzone - Zidane (huuvi168@gmail.com)
I'm developer, I like code, I like to learn new technology and want to be friend with people for learn each other
I'm a developer who loves coding, learning new technologies, and making friends with people who share the same passion. I have been a full stack developer since 2015, with more than years of experience in web development.
Copyright @2022(November) Version 1.0.0 - By Webzone, all things Tech Tips for Web Development Zidane
https://learn-tech-tips.blogspot.com