css-shapes

问题 I have created a shape which represents a page with a shadow that gets bigger towards the bottom. body { background: #dddddd; } div { background: white; margin: 40px auto; height: 300px; width: 300px; position: relative; padding: 10px; } div:before, div:after { height: 96%; z-index: -10; position: absolute; content: ""; left: 8px; top: 2%; width: 30%; max-width: 300px; background: transparent; box-shadow: -10px 0px 10px rgba(0, 0, 0, 0.5); transform: rotate(1.5deg); } div:after { transform:

问题 How can I make css like this as picture below: 回答1: You could use a pseudo element for this: div { height: 300px; width: 300px; background: lightgray; position: relative; border-bottom: 5px solid black; border-right: 5px solid black; } div:after { content: ""; position: absolute; height: 100%; width: 100%; border: 3px solid transparent; border-bottom-color: black; top: -5px; left: 50%; border-radius: 50%; transform: rotate(45deg); } <div></div> You could then play with the height and width

问题 I need to create the bluey/green area that is shown in the picture below. It has angled sides coming down to a point that has a slight curve. What is the best way to achieve this using CSS ? I need to support IE9+ or IE10+ if IE9 support is not possible. I have started a basic demo here - (Don't need the content within the bluey-green area) 回答1: Here's my attempt with css only: .header { background: #415d67; height: 150px; position: relative; z-index: 1; } .header:after { position: absolute;

问题 I've been testing an idea of extended/projecting borders with a few nested divs, and I have a working example below. Basically, what I would like to achieve is vertical and horizontal borders that extend outside of a box with content inside. Sort of like a drafting look. I want this to be fully responsive if possible. In my code, I have set heights with negative margins in order to get the effect I was looking for visually, but it seems like my markup is way too bloated for what I want to do.

问题 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 . Where can I find an example to create a circle like this with css3 and jQuery (for navigation) There should be text (html) in the center When you click (or hover) the next item, the center content should change, and also the background color 回答1: forked from codepen /** * Circular

问题 I want to achieve the right arrow effect using css3, i tried a bunch of times already but no luck. http://jsfiddle.net/ffCDw/ .menu li { list-style-type: none; display:inline; } .menu li a { padding: 0 20px; background: green; color: #fff; } 回答1: I had the same problem and the approach with the borders wasn't quite satisfying enough for me, especially if you want to use :hover... HTML I put a span inside the div, this is for the arrow only. <div class="arrow"> I am the first arrow <span><

问题 I know that it is possible to make a corner like this: .left-corner { width: 0; height: 0; border-top: 100px solid powderblue; border-left: 100px solid transparent; } <div class="left-corner"></div> Is it possible to make a corner with CSS with multiple colors out of an element. Like this? 回答1: Well you could use a peusdo element and put it above your original Element, if you want it to exactly look like the image you've posted. See Code Snippet below. .left-corner{ width: 0; height: 0;

问题 Trying to achieve this with css. I've achieved in doing this but this breaks if my label (CAREER) is longer the size of the div . If its longer then the content wraps and the height of the div increases. But the left ribbon cut does not do that responsively. Can someone suggest a better approach? .custom-tag-container { border: 1px solid; margin: auto; display: flex; align-items: stretch; border-color: green green green transparent; padding: 4px !important; } .custom-tag-container>p { color:

问题 UPDATE So I just found out about elliptical border radius. Achieved almost the same result I was looking for, but the border thickens with the ellipsis so if anyone know's about a better approach I'm still looking. Here's my JSfiddle - Result looks like this Code used in fiddle border-bottom: 3px solid green; -moz-border-radius-bottomleft: 70% 40px; -webkit-border-bottom-left-radius: 70% 40px; -webkit-box-shadow: 0 3px 7px 0 rgba(0,0,0,0.91) ; box-shadow: 0 3px 7px 0 rgba(0,0,0,0.91) ;

问题 I'm not sure what is specific name for this shape but can I just called it "half Parallelogram" ? I want make this shape purely using CSS/CSS3 . Any help? or tutorial? 回答1: You can do it using pseudo-elements like below. The approach is to cut out a triangle shape from the left-bottom and top-right of the box. This method can be used with either a solid color an image inside the shape as long as the body background is a solid color. When the body background is a non-solid color this approach