css-shapes

问题 So I have a breadcrumb nav that are arrows spaced apart. The tricky thing is I need it to be responsive. I think I am close messing around using vh and vw, but the issue I am running into is the white spacer not responding like the arrow before it. Any suggestions? Or is there a better way to handle it? I have tried a bunch of things but none seem to work. Any help is greatly appreciated. Fiddle is included https://jsfiddle.net/8v9ctam0/ /* ---------------------- General Styling -------------

问题 This is what it should look like: Attempts so far: Using a gradient background plus an inner element to cover it and leave just an outer "border". The background is obviously not transparent . body { background: #242424; height: 100%; width: 100%; margin: 0; padding: 0; box-sizing: border-box; font-family: sans-serif; color: #FFFFFF; } div { display: flex; flex-direction: column; justify-content: center; align-content: center; align-items: center; width: 100%; height: 100vh; } h1 { margin:

问题 This question already has answers here : Align text on slanted line (4 answers) Closed 3 years ago . I would like to achieve text-alignment effect like on the screen above. Any suggestions? 回答1: I believe you are looking for the shape-outside property. The shape-outside CSS property uses shape values to define the float area for a float and will cause inline content to wrap around the shape instead of the float's bounding box. This allows for values such as: circle(): for making circular

问题 Hello friends I have tried many times but I am not successful than please help me I want to this below images as like this now i have created this but not created right corner of this div now any body please help me my code is Css .dashbord a { display:block; line-height:28px; padding-left:8px; font-family: 'LatoRegular'; font-size:14px; color:#58544e; max-width:300px; text-shadow:1px 0 0 rgba(241,236,231,1); } .dashbord .active{ background: #b43720; /* Old browsers */ /* IE9 SVG, needs

问题 I need to create a CSS shape like this image.. Please check this fiddle of my work I have created something like that, but I cannot give a curve to it. #shape { border-left: 70px solid transparent; border-top: 100px solid red; height: 0; width: 200px; } Can anyone help me? 回答1: You can use a pseudo element with border-radius and background-shadows to create the curve and enable a transparent background for the curve. Output : #shape { width: 300px; height: 100px; position: relative; overflow:

问题 This question already has an answer here : Ribbon with a “3D” effect (1 answer) Closed 4 years ago . I have this image and I am wondering how to get this design. How to design the highlighted borders in CSS and html. 回答1: Use a couple of pseudo elements and create triangles with their borders then position them absolutely to sit where you want. More information on pseudo elements EXAMPLE div{ background:#999; height:300px; position:relative; width:100px; } div::before,div::after{ content:"";

问题 This question already has answers here : Shape with a slanted side (responsive) (3 answers) Closed 4 years ago . I want to be able to create a transparent background using only CSS but with an angle on one end. I've found various ways of trying to do it, but can't quite get it. I don't really want to use any scripting, just CSS. Background image would need to look like this: 回答1: You could do it using borders: http://jsfiddle.net/wNhjb/ #shape { height: 0; width: 80px; border-top: 80px solid

问题 I'm trying to create inner curved transparent shape,like this but i have trouble with creating this kind of curved shape,this is what i am done` body { background-color: #00a4ffb3; } .parent_wrapper { height: 250px; width: 250px; position: relative; background-color: white; } .tab-indicator { position: absolute; background-color: #000000; width: 50px; height: 60px; border-radius: 50px 0 0 50px; z-index: 1; transform: translateY(0px); right: 0px; transition: transform .3s ease-out; } .tab

问题 I'm trying to make a CSS button . As you can see below, I'm not able to create a gradient for the second HTML-element for the corners. Normally I would use borders or simply rotate a element to create a triangle with a gradient, but the problem is that my triangle isn't a 90 degree square. Desired design: (Grayscale, retina 200% zoomed) My CSS button: (Blue, retina 200% zoomed) Is there a better way to create this button with CSS? http://jsfiddle.net/G8ZBz/ or simply read below: HTML-code

问题 I'm trying to make a CSS button . As you can see below, I'm not able to create a gradient for the second HTML-element for the corners. Normally I would use borders or simply rotate a element to create a triangle with a gradient, but the problem is that my triangle isn't a 90 degree square. Desired design: (Grayscale, retina 200% zoomed) My CSS button: (Blue, retina 200% zoomed) Is there a better way to create this button with CSS? http://jsfiddle.net/G8ZBz/ or simply read below: HTML-code