SQLite How to by Tag:
I would've certainly closed your question as it lacks the efforts by you but as you said that you don't know how to achieve that at all, so thought to...
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...
You could use a border trick with some pseudo elements for this: .onecorner, .twocorners { height: 50px; width: 300px; line-height: 50px; text-align: center; background: lightgray; margin-left: 25px; margin-right: 25px; position:...
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 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:...
One solution is to give one of the triangles a background color with the same value as the border color (in this case, #007bff). Then in the Javascript function, quickly...
You can't apply percentage units to border but you can achieve your aim with vw units : 1/100th of the width of the v+iewport. (source : MDN) DEMO body {...
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...
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...
It's not difficult. You create a circle within a wrapper that clips out what you don't need. demo HTML: <div class='shape-wrap'> <div class='shape'></div> </div> Relevant CSS: .shape-wrap { overflow: hidden;...
updated with shape and border-colors div { margin-top:1em;; text-align: center; padding: 0.5em; border-top:1px solid lightgray; background: linear-gradient(to bottom, #ECECEC 50%, lightgray 50%, lightgray 51%, transparent 52%); } img { position:...
How does a border of 180 pixels with height/width-> 0px become a circle with a radius of 180 pixels? Let's reformulate that into two questions: Where do width and...
Here's a proof of concept example with pure CSS. It uses pseudo-elements and rotate. It's pretty close to your source image and could get closer with some work. Demo: http://jsfiddle.net/csDP9/9/...
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...
Disclaimer: I don't believe this approach is the best to create the shape you are after. Depending on your use case, you should look into SVG or a normal...
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...
There can be several approaches to make your catterpillar responsive. You could use svg, multiple elements/pseudo elements, box-shadows... Here is an example using multiple box shadows and the appraoch described...
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...
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...
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 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...
You can use box-shadow (Hover to see it ) button { width: 200px; height: 100px; background: cornflowerblue; border-radius: 5px 25px 5px 25px; border-bottom: 2px solid black; border-top: 2px solid black;...
This sort of a shape can be created in multiple ways and this answer covers a few of them. The pros and cons of each approach would be very similar...
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...
DEMO <span class="box"> This is a tooltip! </span> .box{ position:relative; background:#000; color:#fff; display:inline-block; padding:15px; border-radius:5px; } .box:after{ position:absolute; content:''; left:50%; margin-left:-10px; top:-20px; border: 10px solid transparent; border-bottom: 10px solid #000;...
Updated Answer (Pure CSS3) Extreme requirements sometimes need extreme solutions. I've built upon my original answer (below) to make a pure css solution that works (and can be made to...
Took me a long time, but yes. It's effectively the same idea as yours but uses zero width containers to push down the shapes. .pusher { display: block; width: 0px;...
Easiest solution without any CSS, would be using svg(maximum browser support). <svg width="100" height="100" viewBox="-1 0 101 100"> <path d="M20,0 L80,0 L100,60 L50,100 L0,60z" stroke="black" fill="coral" /> </svg> You can...
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;...
You can add a circle shape on top of your <a> link by using the :before selector. a { position: relative; } a:before { content: ''; width: 10px; height: 10px;...