Skip to main content

Arrow shapes using CSS

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>

 

Popular posts from this blog

Syslog Standards: A simple Comparison between RFC3164 & RFC5424

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)

Create your own Passport Photo using GIMP

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

Elastic Beats on pfSense : Installation and configuration

Summary Though in many cases syslog is preferred to transport the pfSense logs to external system, Elastic beats provides quite a niche way to send the logs while modelling the data alongside. This makes it ready-made to send to ElasticSearch directly and get ready-made outcomes like SIEM, performance etc. Pre-reqs A build server (preferably Ubuntu or Fedora) with internet connectivity shell access to pfsense server Basic knowledge of Elastic Stack (filebeat.yml configurations etc) Ensure connectivity is allowed from pfsense machine to your Elastic Stack receiver Setup Summary Connectivity tests Install dependencies in build server (vagrant, virtualbox, gmake, go etc) Download Elastic Beats source Make elastic Beats package for FreeBSD Copy binary packages to pfsense server Configure Beats to send to destination Configure ElasticSearch to view the data Installation Steps Connectivity tests Logon to pfsense server via Shel