SQLite How to by Tag:
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...
use this code instead of using border 60px and setting width and height to zero.use width and height and border 1px; .chartBottom{ width:60px; height:60px; border:1px solid #c45; border-bottom:1px solid transparent;...
You can use the before or after pseudo-element and apply some CSS to it. There are various ways. You can add both before and after, and rotate and position each...
Visit this link for all possible shapes CSS Shapes for round shape #circle { width: 100px; height: 100px; background: red; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; } /* Cleaner, but...
To help you visualize the logic step-by-step so you can apply it easily on ANY SIDE you desire: border-top:50px solid blue; border-bottom:50px solid blue; /* Don't set the left border...
Just do this DEMO - 1 (border top or bottom) .menu { width:30px; height:20px; position:relative; display:inline-block; border-top:4px solid black; } .menu:after, .menu:before { content: ''; width: 100%; height:4px; background-color:#000; position:absolute;...
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 {...
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...
margin:auto won't work if you have absolutely positioned divs so to center the hexagon, you have to add top:50%, left:50% and margin: -86.6px 0 0 -150px. The -86.6px is half...
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;...
jsBin Demo A quick introduction, what it takes to create a <span class="ribbon">FREE</span> ribbon shape?: .ribbon{ display:inline-block; height:0; border-bottom:20px solid gold; border-left:20px solid transparent; border-right:20px solid transparent; } Now, using...
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...
Use both :before and :after pseudo elements. Sample: http://jsfiddle.net/8efLr/1/ .feature-icon { width: 100px; height: 100px; position: relative; margin-top: 25px; display: inline-block; } .feature-icon:before{ position: absolute; display:block; content: ""; width:100px; height:100px;...
My best attempt: http://dabblet.com/gist/4592062 Pixel perfection at any size, uses simpler math than Ana's original solution, and is more intuitive in my opinion :) .triangle { position: relative; background-color: orange;...
You have to edit the position of the :before & :after selectors. .dropdown-menu:before { position: absolute; top: -7px; left: 9px; /* Example: right:10px; */ display: inline-block; border-right: 7px solid transparent;...
jsBin demo ul{ list-style:none; background:#ddd; border-bottom: 1px solid #555; } ul li{ display:inline-block; } ul li a{ color:#555; display:inline-block; padding:10px; text-decoration:none; position:relative; } a.selected{ color:#fff; } a.selected:after{ /* Our arrow...
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"> <!--...
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...
because there is no SVG tag, i'll go with pseudo & gradient : div { position:relative; float:left; margin:60px 60px 80px; width:180px; height:200px; border-radius:15px; background:white; box-shadow:/* draw inside part of border...
As jme11 suggested, its better if you use an image map, as the sides of this shape are straight lines. Open the image in an image editor to find out...
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...
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:...
I hope you'll find this answer to be both simple and pixel-perfect. .stripe { background-color: #B7B7B7; height: 13vh; } .whiteThing { background-color: white; height: 13vh; width: 13vh; border-radius:0 50% 50%...
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/...
you could use pseudo elements (and their trickery) to generate something similar to this: div { height: 200px; width: 350px; background: tomato; margin: 50px; position: relative; display: inline-block; } div:before...
I did it with pure css in this example using 4 extra divs: If youre worried about overflow you can just wrap it in an extra div. JS FIDDLE css:...
You need to add content: "" for span:before to work #five_day_table span { display: block; margin: 1px 3px 0px 0px; } span:before { content: ""; display: inline-block; width: 15px; height:...
Please check this fiddle. here is the code HTML <div class="mainOuterDiv"> <div class="middDiv"> <div class="innerLeft"></div> <div class="innerRight"></div> <div class="textDiv"></div> </div> </div> CSS .mainOuterDiv{ width:200px; height:200px; border:solid 2px...
You can do this using svg's clipPath and filters for the box-shadow. The co-ordinates for the triangle were calculated using the formula for a co-ordinate on a circle: (x, y)...
Here's an example with a box-shadow, all latest version browsers should support this http://jsfiddle.net/MZXCj/1/ HTML: <div id="toolTip"> <p>i can haz css tooltip</p> <div id="tailShadow"></div> <div id="tail1"></div> <div id="tail2"></div> </div> CSS:...