FAQ Database Discussion Community


Implement Icon morph animation in Javascript/CSS?

javascript,css,material-design,css-shapes
See this video (HD video here) I was wondering whether there is an easier way to implement this in Javascript/CSS. I know that there is some CSS3 attributes like transition, animation, transform and so on, but as I know, none of these attributes can transform one icon into another and...

Draw line after a title with CSS [duplicate]

html,css,css-shapes
This question already has an answer here: Title with lines filling remaining space on both sides 5 answers How can I draw a line like after title text like this : "TITLE ________" In CSS? The "_" should complete the rest of the div and fill the remaining space....

Three colors angled background color

css,css3,background-color,css-shapes
How could I achieve a background that looked similar to this image: Only 3 colors, angled from the top corner out like a sunray. Maybe sticking with a simple PNG or SVG background image would be a better approach....

CSS corner ribbon not rotated in iPad (Chrome)

html5,css3,ribbon,css-shapes,css-transforms
The following CSS3 corner ribbon works perfectly on Chrome for desktop, but if you open it on an iPad, it is not rotated. http://jsfiddle.net/u6hqte8s/1/ .ribbon { position: absolute; left: -5px; top: -5px; z-index: 1; overflow: hidden; width: 70px; height: 70px; text-align: right; } .ribbon span { font-size: 10px; font-weight: bold;...

CSS 3 Shape: inverted rounded corner “tunnel-like style”

css,css3,css-shapes
I am looking to create a tunnel-like div which has inverted circle borders As you can see it has an 'expanding tunnel effect' from left to right. Ideally the checkered background is transparent but if that is impossible I can maybe make it work with a solid background color. Can...

parallelogram shape in css [duplicate]

html,css3,css-shapes
This question already has an answer here: How to use skew only in the parent element? 3 answers I want to make a header menu background with the help of parallelogram shape in css. Problem is my header menu text is also show in parallelogram style . I want...

Button with Handlebar Design Pure CSS No Images

html,css,css3,css-shapes
I want to design a button that looks like the one below: I know it is a localized issue, but I can't seem to make it look like that without images...

Css3: right trapezoid with border

css,css3,css-shapes
I'm trying to create a transparent right trapezoid with color border using CSS 3 This is what I've gotten so far. http://jsfiddle.net/bodyfarmer/bdhtn7kr/1/ Any help is appreciated ...

How to create a polygon shape div with CSS

html,css,css3,canvas,css-shapes
I would like to create HTML element like on image here: A problem is the DIV element has polygon shape instead of regular rectangle, will be placed above other elements as something like popup and inside that element there is necessary to show an image with rectangular shape in source...

Adding border to CSS triangle [duplicate]

css,css-shapes
This question already has an answer here: CSS triangle custom border color 2 answers I have a triangle <div class="triangle-left"></div> .triangle-left { width: 0; height: 0; border-top: 22px solid transparent; border-bottom: 22px solid transparent; border-right: 22px solid white; } How do I draw the outline of a CSS triangle,...

how to set a shape to a div

html,css,css-shapes
I would like to set a shape to a div tag. Everything works fine, but when I set an img tag inside that shape, it does not show well. My CSS code : #chevron{ width: 350px; height: 100px; background: #337AB7; border-radius: 10px 10px 0 0; position: relative; } #chevron:before {...

Responsive triangle with css issue

html,css,css-shapes
I am making responsive triangle(down arrow) with css. My problem is that I want to increase my triangle height downward But when I increase padding bottom it disturbs the triangle shape. Here is my code : .btna { position: relative; display: inline-block; height: 50px; width: 25%; text-align: center; color: white;...

CSS: Talk Bubble [duplicate]

css,css-shapes
This question already has an answer here: Speech bubble with arrow 2 answers I have a jfiddle right now. This is a code I found online implementing a talk bubble https://jsfiddle.net/3L5abt5t/ However, when I run the code, the triangle part seems to be green. I want it to be...

Shape with a slanted side (responsive)

html,css,css3,responsive-design,css-shapes
I am trying to create a shape like in the image below with a slanted edge on only one side (for example, the bottom side) while the other edges remain straight. I tried using the border method (code is given below) but the dimensions of my shape are dynamic and...

How can I use :before property to create a square before a span

html,css,css-shapes
I want to create a square in front of a span. Something like this image. But I am not successful in creating this with span:before property. Is it possible to create with this? If yes then can someone please tell me how can I do this? I have created this...

connect circles with border radius and lines

html,css,css3,css-shapes
I want to connect 3 circle images with dotted border. My code: <div class="main"> <div class="circle"><img src="http://i59.tinypic.com/fbl21d.png" /></div> <div class="circle"><img src="http://i59.tinypic.com/fbl21d.png" /></div> <div class="circle"><img src="http://i59.tinypic.com/fbl21d.png" /></div> </div> jsfiddle code I would like to have something like on the image below. How can I achieve this? ...

Inside transparent arrow on the top

css,css3,border,css-shapes
I would like to make a transparent arrow over an image. This triangle should be indented in a block and show the background image. Desired output: I used skewX() property that @web-tiki had explained here but I want it to display on the top of the border rather than on...

CSS - create a dynamic “tag” shape facing to the right

html,css,css-shapes
I'm trying to create a "price tag" shape using CSS, with the sharper edge facing to the right. When the edge of the tag is facing left, there's no problem adding text (be it short or long), since the triangle is static and only the rectangle is stretching. I need...

Creating a diagonal line/section/border with CSS

html,css,css3,responsive-design,css-shapes
I am trying to create a diagonal line on a webpage, to act as a section/section break. This is essentially a split colour section. I cant use an image as if the page gets enlarged, the image is going to pixelate. So i need to be able to draw a...

Perfect Circle internal content height unknown

css,css-shapes
I'm having issues figuring out how to make a perfect circle without knowing the exact height of the content (image) inside the circle. I have multiple images (jumbo titles) with circles around them but the image inside is of different height. How would I have it so it appears as...

Creating a responsive triangle with repeating background image

html,css,svg,css-shapes
I am trying to create a triangle for a website, that maintains 100% width at all times as well as having a repeating background and to overlay a dynamic background. Happy to use any method, so far have tried using SVG with a pattern, with no success. Also tried border...

How to make custom shapes in Dreamweaver CS6 [duplicate]

html,css,dreamweaver,css-shapes
This question already has an answer here: Wavy shape with css 2 answers Instead of inserting a shape.png, I want to create a custom shape in Dreamweaver. Can I create a shape using code? Please see the image attached. ...

How can I animate the drawing of text on a web page?

javascript,css,canvas,html5-canvas,css-shapes
I want to have a web page which has one centered word. I want this word to be drawn with an animation, such that the page "writes" the word out the same way that we would, i.e. it starts at one point and draws lines and curves over time such...

How can I create a round arrow with only HTML and CSS?

html,css,css-shapes
I'm trying to create a round directional arrow with CSS and HTML. Below are my attempts. Attempt 1 In this I have rotated the <div> and an arrow, but both are in different positions. This is the CSS: #curves div { width: 100px; height: 100px; border: 5px solid #999; }...

Recreate this radial image using css

css,image,css-shapes
I would like to know if it's possible to recreate the following image using css. I am currently using it but in svg format. ...

How to create a sphere in css?

html,css,css-shapes,css-transforms,shapes
I have trying to create a 3D sphere using just pure css, but I've been unable to generate the shape required. I've seen a cylinder but I can't find any reference to creating an actual sphere. My current code looks like: .red { background-color: red; } .green { background-color: green;...

Creating a responsive cloud shape

html,css,css3,svg,css-shapes
I've been trying to create a responsive cloud shape in CSS for a project. I am trying not to do this with images due to HTTP requests and the requirement for responsiveness. The shape in question would be this: (but can be similar - slight variations/improvements would be cool): I...

How to achieve a trapezoid(?) in CSS3?

css,css3,css-shapes
I'm trying to achieve the following container in CSS3. I tried with transform: skewY but i don't have the desired result. I know that I can achieve it with 3d Transforms, but I have in mind our lovely Internet Explorer. Also I tried to play with pseudo elements but I...

How to create a curve tail for speech bubble with CSS?

css,css3,css-shapes
I'm creating a speech bubble with CSS and I have reached this far. .says{ width: 200px; padding: 20px; margin-right: 20px; background: #BF7EF2; color: #fff; box-shadow: -3px 3px 5px #C1B9C8; position: relative; border-radius: 5px; } .says:before{ content: ""; position: absolute; z-index: -1; top: 14px; right: -18px; height: 20px; border-right: 20px solid...

Double arc shape with CSS jquery or javascript

javascript,jquery,css3,svg,css-shapes
How can I create an arc shape like this: With CSS or jquery or javascript...

How to center CSS-shapes within a wrapper in a row

html,alignment,center,css-shapes
how do I center shapes that are within a wrapper in a row. So far Iv got them into the row but I cant get them to center horizontally. Here is the html code that deals with that part: .wrapper { overflow: hidden; /*make sure the wrapper has no dimension*/...

How to create a rounded Chevron shape [duplicate]

css,css3,css-shapes
This question already has an answer here: Transparent half circle cut out of a div 7 answers I'm trying to create a chevron shape using CSS with a rounded head (top edge, instead of a triangle one), but not able to achieve this. Can anyone help? Demo here. CSS:...

Create a lightning bolt design (like The Flash)

html,css,css3,svg,css-shapes
I am trying to re-create the lightning bolt symbol from The Flash (DC Comics) (or the T-shirt worn by Big Bang Theory's Sheldon Cooper) in CSS. This is going to act like a star rating system, only a 'lightning rating system' instead. However, since I'm trying to keep the...

CSS border triangle point right [duplicate]

html,css,css3,border,css-shapes
This question already has an answer here: How do CSS triangles work? 13 answers So i have a border that is a triangle pointing left, how would i turn this so it points right but staying in the same position ? CSS content: ''; position: relative; display: block; height:...

Circle div balloon

html,css,css-shapes
Here is my current css for image circle baloon .circle-image{ width: 64px; height: 64px; border-radius: 50%; background-size: contain; background-position: center; background-image: url("/assets/img/dashboard/img-stdn.png"); display: block; } And the div output as below: How I can border the div and become like this? Let say the image inside the div : ...

create an adaptive quadrilateral trapezoid in css

css,css3,svg,internet-explorer-9,css-shapes
Is it possible to create the image shapes in css? I've googled this more than I'd like to admit over the last week without finding a solution. I have been able to semi-replicate it but haven't gotten all the requirements worked out. have a border be responsive adapt to content...

Irregular Div shape Distort one corner only

css,css3,svg,transform,css-shapes
How would i create a div shape like this? I have read a lot of techniques but i could not figure this one out. Inside the div is text that should not be distorted. Every technique is welcome it does not have to be pure css. My HTML structure: <div...

Responsive ribbon-type header

css,css-shapes
I am trying to make a ribbon type header for a website I am working on but I am struggling to get the text to adapt well to a smaller resolution. Is there a way I can make the text responsive, or flow to a double line on smaller screens?...

z-index not working on child div with position absolute

jquery,html5,css3,twitter-bootstrap-3,css-shapes
i am trying to create a ribbon where triangle div should be placed below its Cart parent div <div class="rectangle"> <ul class="dropdown-menu font_Size_12" role="menu" aria-labelledby="menu1" style="min-width: 100px; z-index: 0"> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#">Sign in </a> </li> <li role="presentation"> <a rolw="menuitem" tabindex="-1" href="#">View Cart</a> </li> </ul> <!-- Ribbon side-fold...

How to make this angular shaped border (as its shown in the image)? [duplicate]

html,css,html5,css3,css-shapes
This question already has an answer here: Speech bubble with arrow 2 answers I want to make div borders with this kind of angular area. Exactly as it says in the image, I have marked with red oval. This is what I have tried so far: HTML: <div class="box">...

How do this with only CSS

html5,css3,css-shapes
i need "cut" an image from bottom-left of the image to the middle-right (triangle). I have tried something similar using borders with the :after and :before pseudo elements but I dont know how I can achieve this in my particular case. ...

Draw background with white dots with CSS3

css3,css-shapes
I know it's possible to draw this background using only CSS (so without making use of image files). I'm curious on how I can do this. I've found a lot of information about making gradients and such with CSS3 on the web, but I've never found any guide that explains...

Create Left Arrow with CSS before & after pseudo elements

html,css,css-shapes
I have created a right arrow. How do I flip this to have a 2nd left arrow? http://jsfiddle.net/n0rxtr48/ a { display: inline-block; font-family: Arial, Helvetica, sans-serif; font-weight: bold; padding: 10px 15px 10px 10px; position: relative; text-decoration: none; } a:before, a:after { border-right: 2px solid; content: ''; display: block; height: 8px;...

dropdown menu with arrow in center

jquery,html,css,css-shapes
I'm trying to create a dropdown menu like the one here, but I haven't been successful in styling it correctly. The menu I'm looking to create is similar to one found here Example: This is what I have so far! http://jsfiddle.net/9ggfz0st/1/ @import url('http://getbootstrap.com/dist/css/bootstrap.css'); .dropdown-menu:before { position: absolute; top: -7px; left:...

blend mode for shapes in css

css,css3,canvas,css-shapes
Let say I have some circles: <circle class="first">&nbsp;</circle> <circle class="second">&nbsp;</circle> with the following css: circle { border-radius: 50%; width: 100px; height: 100px; background: #000; } How can I achieve the following effect when they overlap? preferably in css, or with the canvas element....

How do I make link the highlight link conform to CSS shape

html,css,css-shapes
How do I make the link outline (blue) conform to the CSS shape? I mean the outline should be in the same shape as the link border. Would you mind linking, or helping me find the right words to describe it, so I can properly research it, or maybe some...

shape-outside not responding to alpha channel

html5,wordpress,css3,alpha,css-shapes
I'm experimenting with CSS Shapes. I can't seem to get the image shape to work. As far as I can tell, my image has an alpha channel, it's just that the browser is not reading it. HTML: <div class="container"> <img src="http://www.kfcartography.com/wp-content/uploads/2015/05/weirdshape2.png"> <p>Text that should be flowing around the weird shape.</p>...

Triangle shadow on CSS ribbon

html,css,css-shapes
I am trying to replicate as pixel perfect as I can get and im having trouble trying to do the shadow on the right. Is this possible with css? CSS: *{margin:0px;padding:0px;} html { width:100%; height:100%; text-align: center; } .bold { font-weight:700; } #ribbon { padding: .34em 1em; margin: 0; margin-top:...

Double curved shape

css,css3,css-shapes
I am currently attempting to generate a 'wavy ghostly bottom' shape. This shape contains two double curves: Although the bottom part of this image I think portrays it in better imagery. My Code My Current Attempt to generate this shape was using pseudo elements and overflow: hidden, although this does...

Creating a Tab shape with CSS or SVG

html,css,css3,svg,css-shapes
Does anyone have an idea how to make this tab like shape : ...

CSS hexagonal li, how?

css,css3,css-shapes
I have a navigation menu with 'li'-s. I want to make this li to hexagonal like this: How can I do this?...

Drawing a shield-like figure in CSS

css,css3,css-shapes
I'm looking for a way to draw a shield-like figure in CSS. Roughly the bottom half of the figure should be a half circle, while the upper half should be part of an upside-down triangle / trapezoid. So where the half-circle ends, it should continue upwards (with a small slope)....

Rectangle with curved side [closed]

css3,css-shapes
How can I achieve this by simple DIV with css? What I am getting now is: https://drive.google.com/file/d/0B82IagbQFADYaVhwTTEyM3Y0TE0/view?usp=sharing I want to look: https://drive.google.com/file/d/0B82IagbQFADYVGpZdmlRc194bVU/view?usp=sharing...

Draw a top bordered tip with CSS

css,css3,css-shapes
I am trying to draw a tip in CSS. I have "middle success" so far, the only problem is that, depending on DIV width, the tip sometimes are not in the center position. What I want: My code so far: .logo { color: #000; font-size: 1.4em; text-align: center; padding-top: 1.5em;...

How animate the height of the background image

javascript,jquery,html,css3,css-shapes
I have tried the following scenario which I need to animate my background image like filling from bottom to top on hover of my div. Whereas my animation is not like filling from bottom instead its like sliding from bottom to top. Can any one suggest me the right way...

How do I create a teardrop in HTML?

html,css,css3,svg,css-shapes
How do I create a shape like this to display on a webpage? I don't want to use images since they would get blurry on scaling I tried with CSS: .tear { display: inline-block; transform: rotate(-30deg); border: 5px solid green; width: 50px; height: 100px; border-top-left-radius: 50%; border-bottom-left-radius: 50%; border-bottom-right-radius: 50%;...

Custom shapes in CSS [duplicate]

css,css-shapes,shapes
This question already has an answer here: How to bevel the corner of a block div? 4 answers How do I create a 'Parallelogram' shape in css with a straight side? [duplicate] 2 answers Trapezium responsive Div with CSS or jQuery 2 answers Basically, I am trying to make...

Show border triangle in navbar using CSS

html,css,css-shapes
I am trying to create a nav bar with an arrow under the item hovered upon. Here's is what I am trying to make: For the arrow I have used the pseudo elements before and after. Here is some of the code: body { background: #FFFFFF; color: #FFFFFF; margin: 0px;...

Border with inverted rectangular corners

html,css,css3,border,css-shapes
How do I create a non-rectangular border like in this image? Current Code: http://jsfiddle.net/bqjr5wep/ div { background:#1c1c1c; width:400px; height:200px; position:relative; } div:before, div:after { content:''; display:block; left:10px; right:10px; top:10px; bottom:10px; border:2px solid #FFF; position:absolute; } div:after { left:14px; top:14px; right:14px; bottom:14px; } ...

How to add a gradient border above image (diagonal border) [duplicate]

html,css,css-shapes
This question already has an answer here: Slanted diagonal line in html or css? 5 answers Hello to all I need to something like this But above an image, here is my first attemp but it doesn't work http://jsfiddle.net/wo8gbhx3/17/ And this is my markup (now) HTML <div class="testing"> <ul>...

CSS Shapes and shape-outside

css,css-shapes
I am using Chrome and Safari, in neither of them the attribute shape-outside seems to work. I've put both the -webkit and the normal version. .circle { background-color: #f3a57b; border-radius: 50%; width: 150px; height: 150px; -webkit-shape-outside: circle(50%); float: left; } .text { float: left; width: 500px; } <div class="circle"></div> <p...

Semi-transparent background for div skewed only on one side

css,css3,transparency,css-shapes,skew
I want to create an html element, e.g. a div, which is styled as follows: semi-transparent background-color rounded borders on all edges left side of the div draws a straight line right side of the div draws a skewed line I'd like to create this in CSS only and wonder...

css make responsive oval block

css,css3,css-shapes
I am trying to make a css blocks for numbers shown in image below. My idea / goal is to make one responsive block so if there will be one number it will be round, if two then like second. I have been tried to make border-radius: 50% so the...

Using CSS Pseudo-Selectors to achieve a ribbon shape

html,css,pseudo-element,css-shapes,pseudo-class
i have the following structure where multiple elements within a carousel have a numbered badge, the white part above works fine when using white background, but in some situations an image gets behind the badge. Is it possible to make the same effect but with a transparent white space below?...

Input with border on half height

html,css,css3,css-shapes
I need to create an input text box with a bottom border and the side borders should span half the height of the input on left and right. Is there an easy way to design this in CSS? Image is show below : ...

CSS Put arrows on each side of a Box(div)

html,css,css-shapes
Need help on how to put an arrow on each side of a box pointing outward. I have the box and the basic CSS for an arrow I saw on another stack question. Need help creating four arrows in that box Im a java developer so this is not my...

How to create a custom shape - css

html,css,css-shapes
I would like to create a custom shape like this image : how can I do ? My CSS : #chevron { position: relative; text-align: center; padding: 12px; margin-bottom: 6px; height: 60px; width: 200px; } #chevron:before { content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 51%; background:...

Concave shape boundary

css3,svg,hover,css-shapes
I am trying to create this shape in CSS/SVG: The problem is that white portion need to be transparent. How do I do that in CSS/SVG? I also need hover on shape. #shape { height: 400px; width: 400px; background: black; overflow: hidden; } #circle1, #circle2, #circle3, #circle4 { background: white;...

Create Box With Diagonal Edge

html,css,css3,css-shapes
I need to create a box with a diagonal edge. Below is the picture and here is a link to it. How would I do this using only CSS and HTML? I'm aware its possible to create triangles in CSS, so maybe I create one div with the rounded corners...

Speech bubble with arrow

css,css3,css-shapes
I have a project where I need to insert speech bubbles / message boxes. The general shape I am trying to achieve is this one : .bubble { height: 100px; width: 200px; border: 3px solid gray; background: lightgray; position: relative; cursor:pointer; } .triangle { width: 0; border-top: 20px solid black;...

Using CSS and HTML5 to create navigation buttons using trapezoids

javascript,html,css,html5,css-shapes
I'm trying to make a navigation-div with 4 buttons, one to go left, one to go right, another one to go down and yet another one to go up. Plus there needs to be an OK-button in the middle. The buttons need to be positions that they form any (the...

Css 3 custom trapezoid

html,css3,css-shapes
Hi , I need create div which would look like one on the provided image. Notice black and grey zones. I have been experimenting with css 3 but i was able to create only differently rotated trapezoid. Is it possible to create this only with css ? EDIT: What...

transparent shape with arrow in upper corner

html,css,css3,css-shapes,curve
Please see the image below. I want to add an arrow to the top right of a div which I am treating as editable input box. Please help me how I can achieve this using CSS. I cannot use a SVG since I need this as a div to show...

CSS HTML Angled Div with Overflow hidden on the bottom

html,css,html5,css3,css-shapes
please take a look at the image My Challenge ist the following. The Blue is a div with a background image. The angle should be -6deg. In this div we have transparent png (here the 2 people). The Peoples head are allowed ^^° to get out of the div. but...

Can't get :after to create right triangle shape [duplicate]

html,css,css-shapes
This question already has an answer here: How to create a custom shape - css 3 answers I am trying to use css to create a background like the yellow in the diagram included. I have spent some time experimenting with using the :after but I can't get the...

Div with the form of a pencil [duplicate]

html,css,css-shapes
This question already has an answer here: CSS triangle custom border color 2 answers How can i create a div with the form of a pencil, just like this: It seems a basic thing but im trying to do it since some time ago and still couldnt do it....

Drawing angled lines in CSS

css,css3,line,css-shapes
What I'm trying to do LOOKS simple, but I can't seem to figure out how to do it. As you can see in my image there are a couple of red lines that go across the bottom, then bend upwards close to the right side. Is there a way in...

Why I can't set border to arrow on tooltip div

html,css,css-shapes
I created tooltip div, and I want to make without background, I removed background color, but i hacve problem with removing color of arrow, if I remove i don't have arrow. I was tried to set border:1px solid; for #talkbubble:before but that's not working. I want something like this http://i.imgur.com/GYcrzuo.jpg...

Circle width animation

css,css3,css-animations,css-shapes
I'm pretty new to CSS3 animations to I'd like to know you how to do the following one: I have a circe: On mousehover, I'd like to have a width transition and obtain this image: Of course this does not work: .logo { width: 100px; height: 100px; border-radius: 50%; transition:...

Title with lines filling remaining space on both sides

html,css,css3,css-shapes
I've been asked to create this title, purely with css, Is it even possible? The background of the text needs to remain transparent, the h2 needs to span the width of any container and have the left and right borders fill automatically the remaining space. h2 { font-size:42px; line-height:48px; width:100%;...

Round edges on shorter side in CSS [duplicate]

css,css3,css-shapes
This question already has an answer here: Border-radius in percentage (%) and pixels (px) 1 answer I want to make my text input have rounded edges on the shorter side, which is vertical side. The effect I need looks like this: If I use border-radius: 50%;, which makes corders...

CSS Container Wrap shaped Polygons

css3,polygon,css-shapes
How can I build the white/green Container (shaped Polygons) with CSS / CSS3 ? ...

Trapezoid div in CSS

html,css3,css-shapes
I want sections with content in a trapezoid div but I don't know how to start or what the best way is to achieve my goal: I had come across this solution but there isn't much info for me to understand CSS3 Transform to Trapezoid HTML <div class="section"> <p>content here</p>...

How can I make my border-radius curve outward?

css,css3,css-shapes
I am try to make a div have borders like the following drawing: This is what I have tried: div { height: 100px; width: 100px; border-bottom-right-radius:100px 10px; border:1px solid #000; } <div></div> What is an effect way to accomplish this?...

Best way to Convert HTML Button to a Link

html,css,twitter-bootstrap,css-shapes
I have the following code where I have a Button that has the arrow hack. The only issue is I'd like to have this display the link on the status bar. A button does not achieve. How do I convert this to a a href link and still be able...

Border-radius in percentage (%) and pixels (px)

css,css3,css-shapes
If I use a pixel value for border-radius, the edge radius is always a circular arc even if the value is greater than the largest side of the element. When I use percentages, the edge radius is elliptic and starts at the middle of each side of the element resulting...

Filling up a circle progress bar

css,css3,css-shapes
I've search this website with multiple progressive circle sample but did not find similar to my requirement. I'm trying to create progress circle filled from bottom to top. The % percent value will pass from textbox. ...

How to divide a circle into 12 equal parts with color using css3/javascript

javascript,css3,css-shapes
HTML: <?xml version="1.0" encoding="utf-8"?> <html> <head> <title>Circle</title> <link rel="stylesheet" href="stylesheet.css" type="text/css" /> </head> <body> <div class="circle"><p class="innerCircle"></p></div> </body> </html> CSS: .circle { width: 450px; height: 450px; border-top: 30px solid #416fa6; border-right: 30px solid #718242; border-bottom: 30px solid #63ae98; border-left: 30px solid #b45447; -webkit-border-radius: 300px; -moz-border-radius:...

The easiest way to approach puzzle menu in web design

html,css,html5,css3,css-shapes
I have 2 basic ideas how to execute my designing, my question is which is better will give me more freedom with animations fiddling in CSS and so on later on. That would be a navigation menu and hovering over one of them would make it bigger. 2 ideas: CSS...

Partial “X” shape over image on hover - can this be done using CSS?

html,css,css3,css-shapes
I need a sort of "X" shape over an image on hover. But not the whole "X", just the outer bits. This is the image from my designer: click for .png on google drive or thusly: * * * * * * * * * * * * I've got...

CSS split a square into 4 triangles

html,css,css3,css-shapes
I am currently trying to make a square be 4 triangles of equal size that have hover events on them. I am creating the triangles like this, .right, left, .top, .bottom { position: relative; width: 26px; } .right:before{ position: absolute; display: inline-block; border-top: 26px solid transparent; border-right: 26px solid #eee;...

CSS round cone shape in Ionic

html,css,ionic,css-shapes
I'm working in a App project using the Ionic framework. I am trying to make a navigation button for TV remote control. My objective is to make the buttons like the image in the link below (from kodi ios remote App) using CSS. Can someone help me? ...

Creating a 'New' spiky label with 24 or above point burst

jquery,html,css,svg,css-shapes
I am trying to make a point burst thing like the image below: Currently, I have tried this using pseudo elements, however, I was only able to generate a 12 point burst and does not reflect that which is displayed within the image. Is there anyway to create a point...

Create a picture frame type border

html,css,canvas,svg,css-shapes
I am trying to create a page that is contained in what can be visualized as a picture frame type border/frame as shown here: So far I've found three ways to do it none of which truly fit my needs, I need this frame to be responsive so that it...

CSS rounded corner element fails in IE11

html,css,css3,internet-explorer-11,css-shapes
I'm basically trying to do a "CSS-triangle" (you know, an element where the entire shape is generated using borders) but instead of a triangle shape, I want a square with rounded corners on the left side and straight corners on the right side. This works fine in Chrome but IE11...

Extrude effect with scaleZ

css,css3,transform,css-shapes
Is it possible to use scaleZ() to effectively create a 3D box? Here's what I've tried, but obviously it didn't scaleZ at all: .box { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: scaleZ(10); -moz-transform: scaleZ(10); -ms-transform: scaleZ(10); -o-transform: scaleZ(10); transform: scaleZ(10); width: 100px; height: 100px; display:...

How to create a div which is skewed on one side [duplicate]

html,css,css-shapes
This question already has an answer here: Create a slanted edge to a div 2 answers There would be some text inside the div and I should be able to set the height and width of div to auto so that it would resize according to text inside. The...

div shaped as flag with css

html,css,css-shapes
I want to add label on some of my elements in website and design for label is flag with an inverted V-shaped cut in the bottom. So far I have this: HTML <div class="css-shapes"></div> CSS .css-shapes{ border-left: 99px solid #f00fff; border-right: 99px solid #f00fff; border-bottom: 39px solid transparent; } http://jsfiddle.net/yhexkm4u/2/...

How to customize ionic style components (lists and tabs with different shapes)

css,css3,ionic-framework,ionic,css-shapes
I was trying to customize ionic lists and tabs but since I am not too experienced in css does anyone know how to get these layouts ? : List picture: TABS picture: ...

How to segment a circle with different colors using CSS

html,css,css3,css-shapes
I want to be able to draw a circle with a segment of it another colour, I would like the amount of a segment covered to be able to be increased in increments of 10% from 0% to 100%. Any examples on google are all sectors not segments. So far...