Skip to main content

Creating arrow edges using CSS

Before we start, we have to understand the concept behind  "border"

Basically, borders render like this:
#sampleStyle{
   border-top   : 25px solid #a71d95;
   border-right : 25px solid #1da2a7;
   border-bottom: 25px solid #70a71d;
   border-left  : 25px solid #c10902;
   width :60px;
   heigth:60px;
}

If we compress the content area, i.e) make width and height values to "0px"

#sampleStyle{
     border-top   : 25px solid #a71d95;
     border-right : 25px solid #1da2a7;
     border-bottom: 25px solid #70a71d;
     border-left  : 25px solid #c10902;
     width :0px;
     heigth:0px;
}


If we want right arrow , make all border-color except border-left-color to transparent


#sampleStyle{
     border-top   : 25px solid #a71d95;
     border-right : 25px solid #1da2a7;
     border-bottom: 25px solid #70a71d;
     border-left  : 25px solid #c10902;
     width :0px;
     heigth:0px;
}


Example:
.arrow_box { 
  position: relative;
  background: #182126; 
  border: 1px solid #000000; 
  padding: 40px;
  width: 280px;
  height: 100px;
  border-radius: 6px;
  font-family:"Arial";
  font-size:46px;
} 

.arrow_box:after, .arrow_box:before { 
  top: 100%; 
  border: solid transparent; 
  content: " "; 
  height: 0; 
  width: 0; 
  position: absolute; 
  pointer-events: none;
} 

.arrow_box:after { 
  border-color: rgba(24, 33, 38, 0); 
  border-top-color: #182126; 
  border-width: 30px; 
  left: 50%; 
  margin-left: -30px; 
}

.arrow_box:before { 
  border-color: rgba(0, 0, 0, 0); 
  border-top-color: #000000; 
  border-width: 31px; 
  left: 50%; 
  margin-left: -31px; 
}
HTML
<div class="arrow_box">CSS ARROW EXAMPLE</div>

OUTPUT






Popular posts from this blog

2D Reflection

#include <stdio.h> #include <stdlib.h> #include<graphics.h> #include<conio.h> #include<math.h> void draw2d(int,int [],int [],int,int); void main() { int gd=DETECT,gm; int x[20],y[20],x1[20],y1[20],tx=0,ty=0,i,fs; initgraph(&gd,&gm,""); printf("No of sides : "); scanf("%d",&fs); printf("Co-ordinates : "); for(i=0;i<fs;i++) { printf("(x%d,y%d)",i,i); scanf("%d%d",&x[i],&y[i]); } draw2d(fs,x,y,tx,ty); printf("translation (x,y) : "); scanf("%d%d",&tx,&ty); while(1) { clrscr(); cleardevice(); printf("1. X Reflection\n\n2. Y Reflection\n\n3. Exit"); draw2d(fs,x,y,0,0); switch(getche()) { case '1': for(i=0;i<fs;i++) { x1[i]=(tx+((x[i]-tx)*cos(M_PI))-((y[i]-ty)*sin(M_PI))); y1[i]=y[i]; } break; case '2': for(i=0;i<fs;i++) { x1[i]=x[i]; y1[i]=(tx+((y[i]-ty)*cos(M_PI))+((x[i]-tx)*sin(M_PI))); } break; case '3': close…

Simple Animation Using C

Here i have used fillpoly function to draw the object body and used fillellipse function to draw tier.
animation is done by looping through the objects x & y position until user hits a key. Keypress event is achived  by using kbhit function. Smoothness of animation is controlled by delay function.

Change the delay values to change the animation speed

Source:

#include<stdio.h> #include<conio.h> #include<graphics.h> #include<dos.h> void main() { int gd=DETECT,gm,i=-300,j; int poly[16]={100,100,250,100,250,50,300,50,325,90,325,140,100,140,100,100}; int tpoly[16]={100,100,250,100,250,50,300,50,325,90,325,140,100,140,100,100}; initgraph(&gd,&gm,""); getch(); while(!kbhit()) { for(j=0;j<16;j+=2) { poly[j]=tpoly[j]+i; } fillpoly(8,poly); setfillstyle(5,7); bar(275+i,60,295+i,85); setfillstyle(5,8); fillellipse(140+i,140,20,20); fillellipse(280+i,140,20,20); setfillstyle(1,0); fillellipse(140+i,140,10,10); fillellipse(280+i,140,10,10); setcolor(…

Personal Diary - A Mini Project Written in Turbo C With Graphical Interface

A Simple Personal Diary written in Turbo C with Graphical User Interface

Features,
Birthday ReminderNotesAddress Book The main part of the project is UI

'GUI.h' header file includes texbox, message-box and more custom graphical functions 
' Dairy.h' header file includes functionality of Personal Dairy
' Dairyload.c' includes loadingscreen, login screen, installation check etc
'Dairy.c' - execution stats here