css-shapes

问题 I'm interested in creating a loading spinner entirely in CSS but in order to do so I would need to be able to draw a open ring shape like this: The ring would draw itself around the circumference of the circle. Is this achievable in CSS? 回答1: To create a circle that gradually draws it's outer path, use SVG. SVG's stroke-dasharray property will turn any path into a dashed line, which you can use to your advantage by setting the dash size to be almost as long as the path itself. Then use a CSS

问题 I'm interested in creating a loading spinner entirely in CSS but in order to do so I would need to be able to draw a open ring shape like this: The ring would draw itself around the circumference of the circle. Is this achievable in CSS? 回答1: To create a circle that gradually draws it's outer path, use SVG. SVG's stroke-dasharray property will turn any path into a dashed line, which you can use to your advantage by setting the dash size to be almost as long as the path itself. Then use a CSS

问题 I've used border-radius: 50% or border-radius: 999em , but the problem is the same: with squared images there's no problem, but with rectangular images I obtain an oval circle. I'm also disposed to crop a part of the image (obviously). Is there's a way to do that with pure CSS (or at least JavaScript / jQuery), without using a <div> with a background-image , but only using the <img> tag? 回答1: I presume that your problem with background-image is that it would be inefficient with a source for

问题 How do I create a CSS shape in which each side is transformed separately. Something like the shape in the below image. Is that possible using CSS only without images? 回答1: I don't think there is any way in CSS to pick and transform each side separately but you can achieve the shape in question by using perspective transforms (pure CSS). Rotating the element with perspective along both X and Y axes sort of produces the effect of each side having a separate transformation. You can adjust the

问题 I created this border design in Photoshop and was wondering if anyone could give me some guidance with how to recreate this using css . 回答1: Creating an effect like this is definitely possible using CSS3 but you would need more than just the border for that. In the below sample, I have used a pseudo-element with a radial-gradient background to mimick the border effect shown in question. Depending on which side should have the border, you can tweak the positioning of the pseudo element to

问题 Please take a look at this image: I apologise for my useless paint ability :-) How can I draw that sort of shape in css, like a ) without the use of text in a div, just pure css. I have tried to make it curved like in the example, but I don't know how to curve it like that from the center. What must I do to make this kind of shape in css? Thanks. 回答1: Here's one approach to implementing this, but note that any text in this element isn't going to maintain the illusion of a curve. So I'm unsure

问题 I'm trying to create a group of chevron shaped divs, and came across this article where the ribbon has an internal triangle shape. http://css-tricks.com/snippets/css/ribbon/ I was trying to add an external border which would follow the triangle, which would achieve the affect I'm looking for without needing to use images. Unfortunately, when I tried adding a box-shadow, I ended up with a square shadow around the div, not a shadow around the triangular bit. Any suggestions on how to acheive

问题 I currently have this HTML: #circle { background-color: orange; max-width: 40px; margin-right: 20px; margin-bottom: 20px; min-width: 40px; min-height: 40px; font-size: 12px; border-radius: 50%; font-weight: bold; text-align: center; vertical-align: middle; line-height: 40px; float:left; } #innerContent { border: solid 2px black; padding: 3px; } #pointerDiv{ float:left; } <div id="circle"><span id='innerContent'>123</span></div><div id='pointerDiv'>text goes here</div> I'm trying to achieve

问题 I designed a new website on photoshop, and when I started to code the nav, I got into a problem. This is how a button should look like: But I don't know how I could code it so when I hover over the button,it shows those lines. I've seen developers create complex shapes with CSS, but I don't know if that one will be possible to be done. Is there a way to do it? 回答1: Such a problem requires us to imagine a little. To achieve the effect you want, you can just set the border-left and border-right

问题 <img src="demo_usa.png" width="960" height="593" alt="Planets" usemap="#planetmap"> <map name="planetmap"> <area shape="rect" coords="0,0,82,126" alt="Sun" href="#"onmouseover="this.style.backgroundColor='#00FF00';" onmouseout="this.style.backgroundColor='transparent';"/> </map> Where is the problem with onmouse over friends? I want to change the color when the mouse is over thea area shape Thx verry much 回答1: An area element just specifies an area of an image, making it clickable. It does