css-shapes

问题 Maybe there's not a way, but I'm looking to create 3 circles that would appear to overlap, yet would be actually individual objects with pure css. I can easily create a crescent moon shape, but I also need this object to only be reactive to the actual colored object, not the border as well. I need to make something like this: And to show you more of what I mean, each object needs to be it's own shape like this: Really prefer css if possible. SVG could be another way, but again, I need each

问题 I created an countdown timer. I got a border which is made circular. As the timer is tending towards zero, the circular border should change color with decrement in the seconds. I created the JSFIDDLE HTML <div class="outer"> <button class="btn btn-default btn-timer">0.00</button> </div> JS CODE var displayminutes; var displayseconds; var initializeTimer = 1.5 // enter in minutes var minutesToSeconds = initializeTimer*60; $("#document").ready(function(){ setTime = getTime(); $(".btn-timer")

问题 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 the bottom of image and have this issue: A fiddle demo of my code is available here Can anyone tell me why it's not working in my case? 回答1: As stated in the question, your case is a bit different from the example that was

问题 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 { content: ''; position: absolute; top: 20px; 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:

问题 This question already has answers here : border curved css - circle with curved end (2 answers) Closed 9 days ago . I'm trying to create something that looks like a mobile phone with HTML and CSS and I'd like the camera to have something like an "inverted border-radius" that connects it with the frame smoothly. I can't just make it bigger and mask the unwanted area with a pseudoelement with a white background because the screen content might not always be white. Also, I can't use mask-image

问题 This question already has answers here : border curved css - circle with curved end (2 answers) Closed 9 days ago . I'm trying to create something that looks like a mobile phone with HTML and CSS and I'd like the camera to have something like an "inverted border-radius" that connects it with the frame smoothly. I can't just make it bigger and mask the unwanted area with a pseudoelement with a white background because the screen content might not always be white. Also, I can't use mask-image

问题 I would like to make a CSS background on "div" with a specific design and this design should be responsive (width and height). You can view the example generated with the properties "border" inside "div" with properties "position absolute" and separated the other "div", but this example isn't correct because when I increase the screen, the width isn't 100%. Image (color purple and transparent): Code: .trape { min-height: 250px; border-top: 50px solid transparent; border-bottom: 50px solid

问题 This is a chevron : .shape { height: 200px; width: 300px; position: absolute; overflow: hidden; } .shape:before, .shape:after { content: ""; position: absolute; width: 150px; height: 120px; background: red; top: 10px; } .shape:before { transform-origin: 0% 100%; transform: skewY(20deg); } .shape:after { transform-origin: 100% 100%; transform: skewY(-20deg); right: 0; } <div class="shape"></div> What I basically need to create is this : How can we stretch the chevron on hover? 回答1: A slightly

问题 I am struggling to create this "button" using CSS. I also would like to be able to add the text "ABI" and "12/19" manually in my HTML so I can change it. Attached the result I would like to have with the dimensions. Thanks for your help. 回答1: I had fun creating it, it is not perfect and you will need some tweaking to get it exacly like the image but it should get you on the right path : FIDDLE DEMO html: <div id="abi">ABI</div> <div id="number">12/19</div> CSS div{ float:left; height:60px;

问题 I am trying to create a button like this: I dont know how to create a light moon shape over the top of the button. This is still far off: Fiddle Demo. .moon { width: 50px; height: 50px; border-radius: 50%; box-shadow: 15px 15px 0 0 green; } 回答1: With just a little inset you can style the shadow on top of the object. E.g. Crescent shape. And, This is the button you want. .moon { background-color: #222; width: 50px; height: 50px; border-radius: 50%; border: 4px solid #222; /* I set 2 shadows