Connect with us!
Country flag United Kingdom using CSS in Visual Studio Code
The United Kingdom, made up of England, Scotland, Wales and Northern Ireland, is an island nation in northwestern Europe. England – birthplace of Shakespeare and The Beatles – is home to the capital, London, a globally influential centre of finance and culture. England is also site of Neolithic Stonehenge, Bath’s Roman spa and centuries-old universities at Oxford and Cambridge.
In this tutorial we will create United Kingdom flag using CSS.
United Kingdom Country flag Output
Here is the output:
United Kingdom Country flag Video Tutorial
You can find the complete coding tutorial in the following YouTube Short video.
Complete Code using HTML and CSS
Copy and paste the complete code in Visual studio code to view the output.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.united-kingdom {
margin-left: 120px;
width: 180px;
height: 120px;
background: #00247d;
background-size: 100px 100px;
position: relative;
}
.united-kingdom:before {
position: absolute;
content: "";
width: 180px;
height: 120px;
background-repeat: no-repeat;
top: 0;
left: 0;
background: linear-gradient(
to bottom,
transparent 40%,
#cc142b 40%,
#cc142b 60%,
transparent 60%
),
linear-gradient(
to right,
transparent 45%,
#cc142b 45%,
#cc142b 55%,
transparent 55%
),
linear-gradient(
to bottom,
transparent 35%,
white 35%,
white 65%,
transparent 65%
),
linear-gradient(
to right,
transparent 40%,
white 40%,
white 60%,
transparent 60%
),
linear-gradient(
146deg,
transparent 50%,
#cc142b 50%,
#cc142b 53%,
transparent 53%
) -65px 45px,
linear-gradient(
146deg,
transparent 50%,
#cc142b 50%,
#cc142b 53%,
transparent 53%
)
55px -45px,
linear-gradient(
34deg,
transparent 50%,
#cc142b 50%,
#cc142b 53%,
transparent 53%
) -75px -43px,
linear-gradient(
34deg,
transparent 50%,
#cc142b 50%,
#cc142b 53%,
transparent 53%
)
70px 46px,
linear-gradient(
146deg,
transparent 45%,
white 45%,
white 55%,
transparent 55%
),
linear-gradient(
34deg,
transparent 45%,
white 45%,
white 55%,
transparent 55%
);
}
</style>
<title>Salow Studios</title>
</head>
<body>
<h1>United Kingdom Flag</h1>
<div class="united-kingdom"></div>
</body>
</html>
Thank you for reading this article. I hope that it helps you creating your own United Kingdom Flag Animation using CSS and HTML. See you in next tutorial!
