SQLite How to by Tag:
You can first create rectangle with border-radius and add triangle with :after pseudo-element. .shape { width: 200px; height: 50px; background: #B67025; margin: 50px; border-radius: 25px; position: relative; } .shape:after {...
Here's an example of what Harry mentioned .triangle{ border-top:10px solid transparent; border-bottom:10px solid transparent; border-right:300px solid red; } <div class="triangle"></div> ...
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 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;...
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;...
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/...
To start with, you should have really tried to attempt this yourself. I know as a beginner it is always nice to just ask and get but I really cannot...
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"> <!--...
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...
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;...
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;...
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 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:...
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 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...
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...
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:...
Below is a sample of how you can do this. It is basically made with one parent div which has the ribbon text and two other div to produce the...
You could use two triangles on :before and :after :pseudo-elements. div { position: relative; width: 100px; height: 40px; border: 4px solid black; } div:after, div:before { content: ''; position: absolute;...
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...
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...
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...
You need to remove your float:left property from your pac man class, and add a text-align:center to your wrapper class. Text-align; This property describes how inline-level content of a block...
How about something like this i used svg Fiddle <svg width="1000" height="500"> <polygon points="100 10, 50 245, 100 500, 200 500, 200 10,100 10" fill="orange" /> <polygon points="400 10, 460...
Using border-image: We can make use of the border-image to assign a linear-gradient as the border image on all the four sides. We would need a pseudo-element (overlapping the parent...
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...
Using jquery and css you can create circle. I am giving here a jquery solution, as CSS solution already provided by others. check jquery DEMO. jQuery Code $(document).ready(function() { $("div").css("border-radius",...
.to-top { border-right: 60px solid transparent; border-left: 60px solid transparent; border-bottom: 60px solid black; position: fixed; bottom: 0; left: 50%; right: 50%; transform: translateX(-50%); } .to-top span { height:...
SVG approach: You can achieve the double curve easily with an inline SVG and the <path/> element instead of the <polygon/> element which doesn't allow curved shapes. The following example...
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...