By
Create arrow and circle background frames, inspired by the custom post styling of Guggenheim 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 }
