css-shapes

The code below will create an arrow right below an <a> element: JSFiddle .btn { position: relative; display: inline-block; width: 100px; height: 50px; text-align: center; color: white; background: gray; line-height: 50px; text-decoration: none; } .btn:after { content: ""; position: absolute; bottom: -10px; left: 0; width: 0; height: 0; border-width: 10px 50px 0 50px; border-style: solid; border-color: gray transparent transparent transparent; } <a href="#" class="btn">Hello!</a> The problem is that we have to indicate the link width to get an arrow of a proper size because we cannot indicate

Is it possible to reproduce this image using only CSS? I want to apply this to my menu, so the brown background appears on hover instance I don't know how to do this, I only have; .menu li a:hover{ display:block; background:#1a0000; padding:6px 4px; } skew a parent element ( LI ) and inverse skew it's children elements nav li { display:inline-block; transition: background 0.2s; transform: skew(20deg); /* SKEW */ } nav li a { display:block; text-decoration:none; padding: 5px 10px; font: 30px/1 sans-serif; transform: skew(-20deg); /* INVERSE SKEW */ color: #0bf; } nav li.active, nav li:hover{

So, I need to make a repeating hexagonal pattern, using CSS. If images are needed, I can go there, but I'd prefer to just use CSS if possible. Here's an idea of what I'm trying to create: Basically, I just need a way to create the hexagonal shapes, and then overlay text/images on top of them. I don't have much code yet, because I'm not really sure where to start. The problem is, I could just use <div> s in the shape of a hexagon like shown in ( http://css-tricks.com/examples/ShapesOfCSS/ ), but then they wouldn't be connecting. I could use a repeating hexagon pattern, but then I wouldn't be

How to create multi-color border like image below? You can do it with :after or :before psuedo element and css linear-gradient as shown below: body { background: #ccc; } .box { text-align: center; position: relative; line-height: 100px; background: #fff; height: 100px; width: 300px; } .box:after { background: linear-gradient(to right, #bcbcbc 25%,#ffcd02 25%, #ffcd02 50%, #e84f47 50%, #e84f47 75%, #65c1ac 75%); position: absolute; content: ''; height: 4px; right: 0; left: 0; top: 0; } <div class="box">Div</div> You can do it without pseudo-elements , just with border-image: linear-gradient

I would like to surround a number in a circle like in this image: Is this possible and how is it achieved? thirtydot Here's a demo on JSFiddle and a snippet: .numberCircle { border-radius: 50%; behavior: url(PIE.htc); /* remove if you don't care about IE8 */ width: 36px; height: 36px; padding: 8px; background: #fff; border: 2px solid #666; color: #666; text-align: center; font: 32px Arial, sans-serif; } <div class="numberCircle">30</div> To make this work in IE8 and older , you must download and use CSS3 PIE . My demo above won't work in IE8, but that's only because jsFiddle doesn't host PIE

I am wondering if there is any way to create this shape with pure CSS. To extend this problem further, this shape needs to clip the image inside (think of it as a mask - but the grey border has to be visible). Or am I better off creating this in canvas/svg? Matt.C It's a little difficult keeping the border, but I managed to achieve a close effect using :before and :after elements with a parent container (:before and :after don't work on an img tag) Add a border to the container Add a before to block out a corner and offset by -1 to cover the border Add an after that's slightly offset from the