css-shapes

问题 I am trying to create a design in which images are octagonal in shape. I used the border hack, but the image needs to be inside the octagon shape. Using pesudo-elements is not apt in this case as the body will also have its own background image. Is it possible with css? My Code div { width: 100vh; height: 100vh; background: gold; position: relative; } div:before { content: ""; position: absolute; top: 0; left: 0; border-bottom: 29vh solid gold; border-left: 29vh solid white; border-right:

问题 This question already has answers here : Shape with a slanted side (responsive) (3 answers) Closed last year . I have been searching for a few days now for code to make the right edge of a div slant 45 degrees. Here is an image example of what I am particularly attempting to get... There seems to be a lot of examples of 'slanted-edge' divs, but I can't find any with the particular right-side slanted. I have spend a great deal of time trying to alter the codes of the others, but it ends up in

问题 This question already has answers here : Input with border for half height (5 answers) Closed 3 years ago . I have an input field with only a border at the bottom, now I need to create a little line on the left and right of the input. It is a little hard to describe, so I will use an example: input { background-color: transparent; height: 20px; padding: 10px 10px 1px; border: 0; border-bottom: 1px solid red; } <input type="text" placeholder="Example"> Fiddle This is what I have: This is what

问题 I have a requirement where I need to load js files dynamically and show the progress of loading files through a SVG icon. The SVG icon will act as progress bar where it fills with a color from bottom to top, linearly. Here is the codepen <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="79.36px" height="93.844px" viewBox="0 0 79.36 93.844"> <path fill="transparent" stroke="black" d="M50,2C30-4,8,7,2,28c-6,20,5,42,26,48h0l-4

问题 I have a requirement where I need to load js files dynamically and show the progress of loading files through a SVG icon. The SVG icon will act as progress bar where it fills with a color from bottom to top, linearly. Here is the codepen <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="79.36px" height="93.844px" viewBox="0 0 79.36 93.844"> <path fill="transparent" stroke="black" d="M50,2C30-4,8,7,2,28c-6,20,5,42,26,48h0l-4

问题 I have read up on various methods and played with the Clippy tool, the problem is the browser support just isn't there yet. What would be the best method for accomplishing the look of the image below with CSS? I am trying to add a shape as bottom-border as you can see in the image below right after the blue background image. Is there a way I can do this that most recent major browsers support through CSS? What I've tried (doesn't seem to work in Chrome and others): .element { -webkit-clip

问题 I am trying to make a curved header. And I am wondering if anyone can point me the right direction/or the best method the header as in the following image. I am not a developer so I am slogging. here is the image of the theme and curved header And here is my code.How can I achieve to make exactly the same header on the above image? *{ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0; margin: 0; } :root{ --red-color:#FF5F6D; --white-color:#FFFFFF;

问题 I'm trying to create a progress indicator - and to a certain extent I've done it, but it's not what I want to end up with. Here's an image: As you can see the indicator shows 1 third, 2 thirds, then full. This is what I want to achieve except that I want the first, second and third sections to be different colors, so I would end up with 3 equal slices in 3 different colors starting at 12 o'clock. Here's the code - I've removed the centre section because it's not relevant to the question: (

问题 This question already has answers here : Speech bubble with arrow (3 answers) Closed last year . I want to give the material-ui popover this following shape shown in the image. I have created the popover working Demo using react and shared the link for editing purpose. Any help ? => Working Demo I'm Sharing the code here also but it would be good if the stackblitz working demo would be in use for editing purpose: import React, { Component } from 'react'; import Popover,

问题 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: