css-shapes | 易学教程

Progress bar made of solid line, with dots as steps

阅读更多关于 Progress bar made of solid line, with dots as steps

问题 I'm trying to create a vertical progress-bar, with 8 dots on a solid line (with the 8th on the end), where every dot stands for one step in the process. See attached screenshot (in the bottom to prevent this question will be broken up). Of course I have tried to make some stuff in HTML and CSS, which you can see in this fiddle (code below). The problem with this is, that I can't find a way to create the 7 dots on the light-green line, without adding 8 more divs (8 because the first also has

How to give a div oval shape?

阅读更多关于 How to give a div oval shape?

问题 I tried a lot on oval shape which have cut in both sides but not able to do it please I need code for oval shape with cut in both side.. Here's my code below:- .demo{ width: 100%; height: 600px; background: white; -moz-border-radius: 100px / 50px; -webkit-border-radius: 100px / 178px; border-radius: 694px / 208px; z-index: 100; position: relative; } 回答1: Is this OK ? HTML <div id="oval_parent"> <div id="oval"></div> </div> CSS #oval_parent{ background:black; width:200px; height:120px;

Can I create a div with a Curved bottom?

阅读更多关于 Can I create a div with a Curved bottom?

So I'm working on a site and I was wondering if it's possible to, purely using HTML5, CSS3 (and JavaScript if needed), make a div with a curved bottom, so it will look practically like this: Or can this only be done using a background image? <body> <div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <ul class="nav"> <li><a href="#">Home</a></li> </ul> </div> </div> </body> CSS: div{ background-color:black; width:500px; height:50px; border-bottom-left-radius:50%; border-bottom-right-radius:50%; } see is this ok for you : DEMO There are different approaches that can be adopted to

Slant the top of a div using css without skewing text

阅读更多关于 Slant the top of a div using css without skewing text

问题 I am trying to create a div that slants only at the top and does not skew the text within it, using CSS. The reason I would like for it to be CSS-only is because it is a responsive design and needs to respond to percentages, as the rest of this div flexes as the device width changes. A photo of what I am trying to accomplish is here: What I have gotten so far is to create a skewed div and position it within the other div, then use a negative margin to pull it upwards. There are two issues

How to create triangle shape in the top-right angle of another div to look divided by border

阅读更多关于 How to create triangle shape in the top-right angle of another div to look divided by border

问题 I want to create shape like on this picture: I created triangle shape like on this pic, and set the margins to be in top right angle, but I don't know how to make it look divided from the left div like shown on picture. Do I have to "cut" left div to remain its grey border and to look divided from green triangle? Is there any idea how to do this? EDIT: I am using fixed navigation bar on page, so when I scroll if div is position:absolute , navigation bar goes behind div. Space between green

Half circle with CSS (border, outline only)

阅读更多关于 Half circle with CSS (border, outline only)

问题 I'm trying to create a circle with CSS, which looks exactly like on the following picture: ...with only one div : <div class="myCircle"></div> and by using only CSS definitions. No SVG, WebGL, DirectX, [...] allowed. I've tried to draw a full circle and fading half of it with another div , and it does work, but I'm looking for a more elegant alternative. 回答1: You could use border-top-left-radius and border-top-right-radius properties to round the corners on the box according to the box's

How to draw circle in html page?

阅读更多关于 How to draw circle in html page?

How do you draw a circle using HTML5 and CSS3? Is it also possible to put text inside? ryanoshea You can't draw a circle per se. But you can make something identical to a circle. You'd have to create a rectangle with rounded corners (via border-radius ) that are one-half the width/height of the circle you want to make. #circle { width: 50px; height: 50px; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; background: red; } <div id="circle"></div> jkj It is quite possible in HTML 5 . Your options are: Embedded SVG and <canvas> tag . To draw circle in embedded SVG: <svg

Easier way to create circle div than using an image?

阅读更多关于 Easier way to create circle div than using an image?

I'm wondering if there's an easier way to create circular divs than what I'm doing now. Currently, I am just making an image for each different size, but it's annoying to do this. Is there anyway using CSS to make divs which are circular and I can specify the radius? Here's a demo: http://jsfiddle.net/thirtydot/JJytE/1170/ CSS: .circleBase { border-radius: 50%; behavior: url(PIE.htc); /* remove if you don't care about IE8 */ } .type1 { width: 100px; height: 100px; background: yellow; border: 3px solid red; } .type2 { width: 50px; height: 50px; background: #ccc; border: 3px solid #000; } .type3

Wave (or shape?) with border on CSS3

阅读更多关于 Wave (or shape?) with border on CSS3

I need to implement a wave shape with CSS3, I tried to implement with CSS3 Shapes, but I has not reached the desired result. * { margin: 0; padding: 0; } body { background: #007FC1; } .container, .panel { border-bottom: 4px solid #B4CAD8; } .container { background-color: #fff; } .container > .text { padding: 0.5em; } .panel { position: relative; float: right; width: 200px; height: 40px; margin-top: -4px; background-color: #fff; line-height: 42px; text-align: center; } .panel:before { content: ''; position: absolute; left: -44px; width: 0; height: 0; border-top: 44px solid #B4CAD8; border-left:

CSS3 Transform Skew One Side

阅读更多关于 CSS3 Transform Skew One Side

Is it possible to create "CSS3 Transform Skew One Side" I found one solution, but it's not useful to me, because I need to use a image for background (not color) #skewOneSide { border-bottom: 40px solid #FF0000; border-left: 50px solid rgba(0, 0, 0, 0); height: 0; line-height: 40px; width: 100px; } Even this JsFiddle is not useful as well (skewed area should be transparent) Diego Try this: To unskew the image use a nested div for the image and give it the opposite skew value. So if you had 20deg on the parent then you can give the nested (image) div a skew value of -20deg. .container {