css-shapes

来源： https://stackoverflow.com/questions/56804355/creating-a-css-blinking-eyelid-effect

来源： https://stackoverflow.com/questions/56804355/creating-a-css-blinking-eyelid-effect

来源： https://stackoverflow.com/questions/56804355/creating-a-css-blinking-eyelid-effect

问题 I'm trying to create a piano keyboard that will keep it's elements ratios using flex box, but can't seem to make the black notes stay the same width or height once I start changing the window size. Here is a fiddle body{ width: 800px; height: 200px; display: flex; } #kbd { padding: 1%; flex-flow: column; display: flex; flex: 4; } #keys { display: flex; flex: 8; justify-content: center; } .note { flex: 1; display: inline-flex; align-items: center; } .black { justify-content: center; position:

问题 I've got a div that looks like a orange square I'd like to draw a white X in this div somehow so that it looks more like Anyway to do this in CSS or is it going to be easier to just draw this in Photoshop and use the image as the div background? The div code just looks like div { height: 100px; width: 100px; background-color: #FA6900; border-radius: 5px; } 回答1: You could just put the letter X in the HTML inside the div and then style it with css. See JSFiddle: http://jsfiddle.net/uSwbN/ HTML:

问题 I've got a div that looks like a orange square I'd like to draw a white X in this div somehow so that it looks more like Anyway to do this in CSS or is it going to be easier to just draw this in Photoshop and use the image as the div background? The div code just looks like div { height: 100px; width: 100px; background-color: #FA6900; border-radius: 5px; } 回答1: You could just put the letter X in the HTML inside the div and then style it with css. See JSFiddle: http://jsfiddle.net/uSwbN/ HTML:

问题 I want to show the text around the Circle I use shape-outside: circle() property but it is not giving me the result i want to display two containers first is "class circal" which is used to display image second is "Class blank_circale" which is for display the text I want the text in "Class blank_circale" rounder around "class circal" div so kindly tell me what is the right way to achieve this and sorry for bad English .patant_contanner { width: 90%; height: 350px; margin: 0px auto;

问题 I want to show the text around the Circle I use shape-outside: circle() property but it is not giving me the result i want to display two containers first is "class circal" which is used to display image second is "Class blank_circale" which is for display the text I want the text in "Class blank_circale" rounder around "class circal" div so kindly tell me what is the right way to achieve this and sorry for bad English .patant_contanner { width: 90%; height: 350px; margin: 0px auto;

问题 Simple question really, I want to know how I would make a triangles width (made in css with the below code) equal to the page width so when the browser resizes so does the triangle. My Code, So far .triangle { color: crimson; width: 0; height: 0; margin-top: 30%; border-top: 100px solid crimson; border-left: 100px solid transparent; border-right: 100px solid transparent; } 回答1: .triangle { color: crimson; width: 0; height: 0; margin-top: 30%; border-top: 100px solid crimson; border-left: 50vw

问题 How can I make a dot under text using only CSS as shown in below picture? The picture needs to be always in middle with any length of string. Probably I need to use :before OR :after ? I've tried but result was awful. 回答1: A transformed pseudo element can be used to create this: body { text-align: center; } .text { display: inline-block; vertical-align: top; padding-bottom: 10px; position: relative; text-align: center; padding: 20px 10px; line-height: 24px; min-width: 100px; background: #333;