SQLite How to by Tag:
You can create this by placing after and before pseudo-elements the after pseudo-element is skewed to make the slanted edges. Note:This may not be the best solution i would suggest...
I like stuff like this as I always mess around to create things like this. So here is how I would do it. Using :before and :after we can create...
I think you are looking for this. css .hex { position: relative; margin: 1em auto; width: 10em; height: 17.32em; border-radius: 1em/.5em; background: orange; transition: opacity .5s; } .hex:before, .hex:after {...
Cog and chain animation : I totaly refactored the code (CSS and HTML), it is now : shorter (especialy the css) simpler more realistic: corrected the synchronisation issue bteween the...
You could use something like this CSS .outer_circle { height:400px; line-height:400px; width:400px; border-radius:50%; background-color:#000000; position:relative; margin:0 auto; } .outer_circle p { text-align:center; vertical-align:middle; color:#ffffff; } .circle { background-color:#aeaeae; border-radius:50%; height:40px;...
Here's a way, although it does have some shortcomings, like no borders and it isn't transparent: HTML: <div class="left"></div> <div class="right"></div> CSS: .left, .right { width: 100px; height: 100px; float:...
For this transparent cut-out hexagon, I would suggest using an inline SVG with the path element: svg{ display: block; width: 70%; height: auto; margin: 0 auto; } path{ transition: fill...
Try to break your shape up in smaller shapes. You could do something like this: Draw a square to serve as the main body for your shape Draw three triangles...
Can border be applied to a clipped element along the clip path? No, adding border property to the clipped element would not apply the borders along the clipped path because...
According to your html, what i get is Demo. I just played with transform. .mainDiv{ position: relative; width: 206px; height: 190px; margin: 0px auto; margin-top:100px; } .square{ width:100px; height:100px; background:#c52329;...
You could define three different CSS classes - one class for every shape. Note that classes in style sheets start with a dot "." and are applied to a DOM...
TL;DR: (Solution) The simplest way to invert that pentagon would be to invert the borders that are used in creating it like in the below snippet: #pentagon { margin: 0px...
This is easily possible with 2 elements and using a pseudo element to get the arrow bit underneath to show. It doesn't take a great deal of HTML/CSS to complete...
Since you are already using a radial-gradient to create the border corner scoop shape, all that is needed is to add an extra color-stop position in between to produce the...
How about using gradients? div{ width: 50px; height: 50px; background: linear-gradient(135deg, #333 0%, #333 90%, transparent 90%, transparent 100%); } http://jsfiddle.net/dCc7G/...
This can be done but will require some extra pseudo elements. You need to reverse your logic a little and make the arrow "cut out" the background as CSS arrows...
You can look at the code here, it does exactly what you want: http://codepen.io/orhanveli/pen/tbGJL The code from the website: HTML <!-- Lets create a CSS3 stamp --> <div class="stamp"> <!--...
Actually, you can do it using CSS3 - see my demo: http://dabblet.com/gist/3116939 // EDIT: version that also works in IE9 http://dabblet.com/gist/3117278 The idea is to have a div .pie with...
Write like this: .dashbord .active:after{ content:''; position:absolute; right:-11px; top:3px; z-index:-1; width:22px; height:22px; background:green; -moz-transform:rotate(45deg); -webkit-transform:rotate(45deg); transform:rotate(45deg); box-shadow:-3px 0 0 0 rgba(153,40,19,1) inset; background: -moz-linear-gradient(left...
You can use multiple linear-gradient images as background for the parent div container like shown in the below snippet. This is one way to achieve it without adding any extra...
Using SVG: While using SVG, you could make use of path and polyline elements to draw the required shape. As indicated by Paulie_D in comments, SVG is the better choice...
I made some changes to your CSS in order to get to the desired behaviour. The triangles are sized and positioned according to the parents font size. This isn't pixel...
SVG Complex shapes can be hard to achieve in CSS. I would recommend using SVG to create this shape <svg viewBox="0 0 100 100" width="300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink"> <clipPath id="clip">...
Use a pseudo-element like :before, also move the styles from cadre to style the span num. Try this: .c { width: 225px; float: left; padding: 13px; margin: 5px; border-width: 2px;...
If you have a plain background color, you can do this with pseudo elements : DEMO HTML : <section class="stage"> <figure class="line"></figure> </section> CSS : .line { height: 8px; position:relative;...
You can now include web fonts and even shrink down the file size with just the glyphs you need. https://github.com/fontello/fontello http://fontello.com/ li:before { content:'[add icon symbol here]'; font-family: [my cool...
Not exactly cross-browser but works. Hope I've understood your request. http://jsfiddle.net/wmDNr/3/ .triangle { position: relative; width: 20px; margin-top: 100px; } .triangle>div { width: 20px; height: 2px; background: red; margin-top: 100px;...
You have a great base to go on. It just needs a few tweaks here and there. (Making individual styles for flags is going to be a colossal pain though)....
If the space between the arrows does not need to be transparent (it is solid color) you can use the :before and :after to create the edges (without new elements...
CSS3 Mon Amour - A 4 Step Love Afair There are a few steps for creating heart shape using CSS3: Create a block-level element such as a <div> in your...