Skip to main content

Arrow shapes using CSS

By df
CSS is wonderful when it comes to presentation. Its all about how you tweak the colours.  I have managed to created "Single Headed" arrows and "Double Headed" arrows using pure CSS. Very useful if you want to change colours of arrows dynamically based on given criteria.

 

Please download the file at:  cssArrow

The two main components are : Arrow Head, Arrow Body  which will have horizontal and Vertical types.  Below is the full HTML to test out Arrows using CSS.

 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8″ />
<title>CSS Arrow Example</title>
<meta name="revisit-after" content=" 30 days " />
<meta name="robots" content="index,follow" />
<meta name="rating" content="General" />
<meta name="MSSmartTagsPreventParsing" content="TRUE" />
<meta name="description" content="Test" />
<meta name="author" content="DiaryFolio.com" />
<meta name="keywords" content="" />
<meta name="copyright" content="DiaryFolio.com" />
<style type="text/css">
body {
background: #FFF;
padding: 0;
margin: 0;
width: 100%;
text-align: center;
}
#page {
width: 1000px;
min-height: 450px;
margin: 20px auto;
position: relative;
background: #FFF;
padding: 10px;
}
.arrow-block-horizontal {
float: right;
display: block;
position: relative;
width: 220px;
height: auto;
margin: 20px;
}
.arrow-block-vertical {
float: left;
display: block;
position: relative; /* Will Split the Arrow Head from Body */
width: auto;
height: 190px;
margin: 20px;
}
.horizontal-long {
float: left;
display: block;
width: 200px;
height: 15px;
background: #DCDCDC; /* Colour for Arrow Body */
}
.horizontal-double {
float: left;
display: block;
width: 180px;
height: 15px;
background: #DCDCDC;
}
.vertical-long {
float: left;
display: block;
width: 15px;
height: 200px;
background: #DCDCDC; /* Colour for Arrow Body */
}
.vertical-double {
float: left;
display: block;
width: 15px;
height: 185px;
background: #DCDCDC; /* Default Colour for Arrow Body */
}
.arrow-up {
float: left;
border-bottom: 20px solid #DCDCDC; /* Default Colour for Arrow Heads */
border-left: 20px solid transparent;
border-right: 20px solid transparent;
width: 0px;
position: absolute;
top: -10px;
left: -12px;
}
.arrow-down {
border-top: 20px solid #DCDCDC;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
width: 0px;
position: absolute;
bottom: -10px;
left: -12px;
}
.arrow-left {
float: left;
border-right: 20px solid #DCDCDC;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
width: 0px;
margin: -12px 0 0 0;
}
.arrow-right {
float: right;
border-left: 20px solid #DCDCDC;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
position: relative;
width: 0px;
margin: -12px 0 0 0;
}
.block {
float: left;
display: block;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<div id="page">
<div>
<div></div><div></div>
</div>
<div>
<div style="border-right: 20px solid #DCDCDC;"></div>
<div style="background: red;"></div>
<div style="border-left: 20px solid #DCDCDC;"></div>
</div>

<div>
<div class="arrow-block-horizontal">
<div class="arrow-left "></div><div class="horizontal-long"></div>
</div>
</div>
<div>
<div class="arrow-block-horizontal">
<div class="arrow-right "></div><div class="horizontal-long"></div>
</div>
</div>
<div>
<div class="arrow-block-horizontal">
<div class="arrow-left "></div><div class="horizontal-double"></div><div class="arrow-right"></div>
</div>
</div>

</br>
</br>
<div>
<div class="arrow-block-vertical">
<div class="arrow-up "></div><div class="vertical-double"></div><div class="arrow-down"></div>
</div>
</div>
<div>
<div class="arrow-block-vertical">
<div class="arrow-up "></div><div class="vertical-long"></div>
</div>
</div>
<div>
<div class="arrow-block-vertical">
<div class="arrow-down "></div><div class="vertical-long"></div>
</div>
</div>

</div>
</body>
</html>

 
Labels:

Popular posts from this blog

Create your own Passport Photo using GIMP

By df
This tutorial is for semi-techies who knows a bit of GIMP (image editing).   This tutorial is for UK style passport photo ( 45mm x 35 mm ) which is widely used in UK, Australia, New Zealand, India etc.  This is a quick and easy process and one can create Passport photos at home If you are non-technical, use this link   .  If you want to create United States (USA) Passport photo or Overseas Citizen of India (OCI) photo, please follow this link How to Make your own Passport Photo - Prerequisite GIMP - One of the best image editing tools and its completely Free USB stick or any memory device to store and take to nearby shop A quality Digital camera Local Shops where you can print. Normally it costs (£0.15 or 25 US cents) to print 8 photos Steps (Video Tutorial attached blow of this page) Ask one of your colleague to take a photo  of you with a light background. Further details of how to take a photo  yourself       Take multiple pictures so that you can choose from th
Read more

Syslog Standards: A simple Comparison between RFC3164 & RFC5424

By
Syslog Standards: A simple Comparison between RFC3164 (old format) & RFC5424 (new format) Though syslog standards have been for quite long time, lot of people still doesn't understand the formats in detail. The original standard document is quite lengthy to read and purpose of this article is to explain with examples Some of things you might need to understand The RFC standards can be used in any syslog daemon (syslog-ng, rsyslog etc.) Always try to capture the data in these standards. Especially when you have log aggregation like Splunk or Elastic, these templates are built-in which makes your life simple. Syslog can work with both UDP & TCP  Link to the documents the original BSD format ( RFC3164 ) the “new” format ( RFC5424 ) RFC3164 (the old format) RFC3164 originated from combining multiple implementations (Year 2001)
Read more

VS Code & Portable GIT shell integration in Windows

By df
Visual Studio Code & GIT Portable shell Integration Summary Many of your corporate laptop cannot install programs and it is quite good to have them as portable executables. Here we find a way to have Portable VS Code and Portable GIT and integrate the GIT shell into VS Code Pre-Reqs VS Code (Install version or Portable ) GIT portable Steps Create a directory in your Windows device (eg:  C:\installables\ ) Unpack GIT portable into the above directory (eg it becomes: C:\installables\PortableGit ) Now unpack Visual Studio (VS) Code and run it. The default shell would be windows based Update User or Workspace settings of VS Code (ShortCut is:  Control+Shift+p ) Update the settings with following setting { "workbench.colorTheme": "Default Dark+", "git.ignoreMissingGitWarning": true, "git.enabled": true, "git.path": "C:\\installables\\PortableGit\\bin\\git.exe", "terminal.integrated.shell.windows"
Read more