News

How to draw CSS arrows and style circular shapes

Create arrow and circle background frames, inspired by the custom post styling of Guggenheim ZERO

zero

Create arrow and circle background frames, inspired by the custom post styling of Guggenheim ZERO

zero

The arrow elements

Let’s start with this idea of creating an arrow shape purely with CSS. On Guggenheim ZERO, the arrows are images but in fact these arrows can also be made more elegantly. It begins with two <div> elements, one to form the arrow stem and the other to be the pointed head. We give these an id to suit and nest them inside another <div> we’ll call ‘arrow-wrapper’ like so:

001 <div id="arrow-wrapper">
002 <div id="arrow-stem"></div>
003 <div id="arrow-head"></div>
004 </div>

Arrow wrapper styling

We want the two parts of our arrow to be joined so when we move them around the page they remain as one. Later we will also ensure the head element floats to the head of the stem on the right. In our CSS class we’ll set the desired width and height, while the top margin pushes it down inside a main container:

001 #arrow-wrapper {
002     width: 700px;
003          height: 100px;
004     margin-top: 400px;
005 }

Style the arrow stem

The arrow stem <div> is styled so that we actually only see the element’s bottom border, set to black. Setting the background to transparent and the height as required means the 34px solid border line is pushed down to meet the centre point of what will be the arrow ‘head’ sitting directly to the right:

001 #arrow-stem {
002 background: transparent;
003     width: 600px;
004     height: 33px;
005 border-bottom: 34px solid     black;
006 }

Create the arrow head

The arrow head <div> will append to the right of the stem to form our arrow. This is formed by adding the following CSS class and rendering a triangle shape. This technique is derived from http://css-tricks.com/examples/ShapesOfCSS – a page with some excellent solutions for drawing CSS-based shapes. Essentially, our <div> again becomes merely a left border by making the top and bottom ones transparent:

001 #arrow-head {
002 border-top: 50px solid transparent;
003 border-left: 100px solid black;
004 border-bottom: 50px solid transparent;
005 }

Add image and float left

The next vital part in our CSS is floating all our <div> elements left, so we not only force our arrow into line but also line up the wrapper to our new circular image. So in your HTML just after the arrow-wrapper add a fresh <div> called ‘circleImg’ as shown. The container <div> is merely a box for positioning everything centrally on the page:

001 CSS:
002 #arrow-stem, #arrow-head, #arrow-wrapper, #circleImg {
003     float: left;
004 }
001 HTML:
002 <body>
003 <div id="container">
004     <div id="arrow-wrapper">
005     <div id="arrow-stem"></div>
006     <div id="arrow-head"></div>
007     </div>
008     <div id="circleImg"></div>
009 </div>

Style the circle image

Our example image is added as a background for circleImg in the associated CSS class setting the desired width and height dimensions squarely to 600 by 600 pixels. The property background-size can then be set to ‘cover’ if you want the source image in a better size within the frame. We then simply use the border-radius property and set it to a value exactly half of our edges, so in this case it will be 300px. The margin-left of 70px is merely a spacer between the arrow point and image.

001 #circleImg {
002 background-image: url('myImage.    jpg');
003 width: 600px;
004 height: 600px;
005 border-radius: 300px;
006 margin-left: 70px;
007 }
×