SQLite How to by Tag:
You can use a pseudo-element to insert an absolutely-positioned border: #status-buttons { position: relative; /* 1 */ display: inline-block; /* 2 */ } #status-buttons::after { /* 3 */ content: "";...
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...
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;...
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;...
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...
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;...
The best solution using CSS would be to use some nested elements. You could create a div (.pointy) with two other divs inside it (.curve-left & .curve-right). The inner divs...
You're correct in using the :after pseudo-class. My assumption is that you possibly forgot to specify the content: '' attribute. So first, you're going to want to create a block...
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...
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)....
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...
JSFiddle .circle { width: 500px; height: 500px; border-radius: 50%; font-size: 50px; color: #fff; line-height: 500px; text-align: center; background: #000 } <div class="circle">Hello I am A Circle</div> ...
You can just set overflow-x: hidden;, so scrolling in y direction will be nevertheless possible: body { overflow-x: hidden; } #angled-shape { width: 3000px; height: 800px; background-color: lightgrey; margin-top: 50px;...
You could do this using svg's mask. You can change the width and height by changing the #container's width and height. #container { width: 80px; height: 100px; } <div id="container">...
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;...
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...
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...
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...
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...
You could achieve that by using skewX transform and specifying the origin of the transform as follows: .bubble { position: relative; top: 4.8em; width: 275px; height: 40px; padding: 5px; background:...
You might be able to do it using :before and :after CSS selectors. I just whipped up a rough example. JSFiddle HTML: <div class="slanted"></div> CSS: .slanted { position: relative; height:...
Use a background image in your CSS- background:url("http://site.com/img/whatever.svg"); And then set it to repeat only horizontally- background-repeat:repeat-x; This means that yes, you do have to use a background image. You...
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...
You need to add the last value for border-width. Try this: .date:after { border-width: 10px 10px 0 0; } .date { display: block; width: 50px; font-weight: 400; background-color: #00a1e0; color:...
You could try something like this: .header { padding-top:26px; padding-left:40px; position:relative; } .i { position:absolute; width:80px; height:80px; border-radius:50%; top:0; left:0; } .headingText { color:white; background:black; display:inline-block; width:350px; padding-top:10px; padding-bottom:10px; text-align:center;...
Add the background color to the parent div to fill in the gap Place the border-radius on the parent div to create the two rounded corners Move the :before...
One solution would be to use two angled linear-gradient strips - one on the left and other at bottom of the button element. Imagine placing at 10px x 10px square...
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/...
Here are DEMO HTML: <div id="gray"> <div id="red"></div> </div> CSS: #gray{ height: 100%; background-color: #ccc; overflow: hidden; } #red{ width: 150%; height: 150%; background-color: #f00; border-radius: 100%; top: 50%; left:...
You need 4 pseudo elements to create this properly, because triangles are created using borders, so they can't have a border and different background-color. We therefore need an inner and...