css-shapes

问题 How could I go about constructing something like this with pure CSS? This is how far I've gotten so far: Fiddle I'm struggling with how to get that rounded corner there, even if I continue to add additional span s. CODE: body { background: #000; } .container { position: relative; width: 300px; height: 150px; margin: 10% auto; } .top-right { position: absolute; top: -10px; right: 0; width: 50px; height: 1px; background: white; border-radius: 5px; } .box { width: 100%; height: 100%; background:

问题 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: #337AB7; -webkit-transform: skew(0deg, 6deg); -moz-transform: skew(0deg, 6deg); -ms-transform: skew(0deg, 6deg); -o-transform: skew(0deg, 6deg); transform: skew(0deg, 6deg); } #chevron:after {

问题 I want to make a menu, in which the ends of the menus overlap and they have curved borders and slightly slanting edges. Without using a background image, is it possible to do such a menu with only CSS? For better understanding, have attached the sample of menu below. Want to know how to make the parts marked in red using CSS alone. Please help, thanks in advance. 回答1: Skew the :before and :after pseudo elements, set pseudos to some - offset add left-top border-radius to :before and right-top

问题 I'm working on a css animation that uses 'cogs and chains', but am unable to create a 'smooth' border rotation sequence. You can see in this fiddle How (currently) I'm using a pseudo element to generate a 'rotation' effect. This is done by 'switching' between a dashed white and dashed gold colored border, making it seem like the 'border is rotating'. What I have #one{ -webkit-animation: rotateClockwiseAnimation 5s linear infinite; /* Safari 4+ */ -moz-animation: rotateClockwiseAnimation 5s

问题 I'm trying to replicate a graphical design using css, but I have failed for responsive, I can achieve an static form but with tiny defects (due to putting together two elements). This is the graphical design: I prefer it a bit more tilted, like: skew(-40deg) . But the idea is to have an inner rounded border that wraps that key-button just like in the image. The html is simple: <header> <nav></nav> </header> The css: body > header > nav { display: flex; align-items: flex-end; justify-content:

问题 Ok so, I'm trying to replicate the effect you see here at the bottom of the page, with the back to top button: http://www.ppp-templates.de/tilability/ - After the content area for We stay connected. basically he's using a background image for that and I'd like to replicate it with CSS and keep the same effect. I know how to create triangles with CSS with borders, but in my case I'd like to use the transparent bg image and not a color so I can't use borders I removed the background image and

问题 I'm trying to achieve following look, with pure css: Where each white arc is a different element, say span. I know we can make round shapes with css, but how can it be turned into arc sort of shape? 回答1: With the following HTML: <div id="arcs"> <div> <div> <div> <div></div> </div> </div> </div> </div> And the CSS: #arcs div { border: 2px solid #000; /* the 'strokes' of the arc */ display: inline-block; min-width: 4em; /* the width of the innermost element */ min-height: 4em; /* the height of

问题 Closed . This question needs to be more focused. It is not currently accepting answers. Want to improve this question? Update the question so it focuses on one problem only by editing this post. Closed 4 years ago . I know what you're thinking, there's at least a million questions like this, asking about waves in borders, or waves at the edges of elements. However, I have a different question. What I need is a combination between a zigzag-edge (I have no idea how to call it, I'm not English)

问题 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 diagonal line directly at the bottom of the div, like the image below. I have tried using a border, however i cannot get the actual break to be in the middle, rather than the right or left hand side. Is there a way to draw diagonal lines in CSS? As you

问题 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 but showed on web like filling all space included triangle on the left side. Do you think is there any possibility to realize that without preparing showed images as transparent PNGs in proper polygon format?