css-shapes

问题 I have this shape: and I was wondering if its possible to create it with CSS3. This is what I have so far (click for fiddle): HTML: <div id="cafeDialog" role="dialog" class="cafeDialog caspSearch" style=""> <div data-title="Search" role="main"> <div> </div> </div> </div> CSS: html, body { height: 100%; } .caspSearch { border: 1px solid black; background: black; background: -moz-linear-gradient(top, rgba(128, 144, 152, 0.9) 0%, rgba(67, 74, 80, 0.91) 8%, rgba(54, 58, 61, 0.96) 91%, rgba(74, 81

问题 So I've been at it for a while trying to achieve this one shape with CSS with no good solutions. I need this to be an image because this div may resize and I want it to stay intact. I've also attempted to create an SVG which did not work out very well, I've seen some people work with gradient to make shapes but I'm not able to find any good guide to point me in the right direction. Any help is appreciated :) 回答1: Using gradients with angles is not fit for your case because (as already pointed

问题 I want to create a gradient arrow shape button with gradient border and 1px inner shadow from CSS. I've created an image to show the button and the style rules: This is what I have so far: .button { color: #FFF; background-color: #D02180 !important; background: -webkit-gradient(linear, 0 0, 0 100%, from(#f84aa4), to(#d02181)); background: -webkit-linear-gradient(#f84aa4, #d02181); background: -moz-linear-gradient(#f84aa4, #d02181); background: -o-linear-gradient(#f84aa4, #d02181); background:

问题 The above image is a screenshot of the top of a side navigation on my site. I would like for the nav container to have a "clipped" top right corner, which I am currently achieving with .sideNav { background: rgba(24, 69, 59, .8); color: #FFF; padding: 10px; position: relative; } .sideNav:after { content: ""; position: absolute; top: 0; right: 0; border-width: 40px 0px 0px 40px; border-style: solid; border-color: #fff #fff transparent transparent; background-clip: content-box; } <nav id=

问题 I'm trying to emulate an angled path line similar to this image. The way I'm doing it is using two trapezoid shapes, and overlapping one with another that would be the same as the background as seen in this jsFiddle. But I realized I want the rest of the shape to be transparent instead of being able to overlap other objects. The core is just a little bit of CSS, an outlineMaker div inside of a rightTrapezoid div. .rightTrapezoid { border-bottom: 100px solid red; border-left: 0 solid

问题 Is there any way to create an arrow like that in the following button, using CSS? I know how to create triangle-like arrows like this #triangle_arrow { top: 3pt; content: ""; display: inline-block; width: 0.5em; height: 0.5em; border-right: 0.1em solid black; border-top: 0.1em solid black; transform: rotate(45deg); } but that line towards the arrow's corner is confusing me! 回答1: Already there is way through which you could achieve this i.e. suggested by James, but you could even do this using

问题 This question already has answers here : html/css hexagon with image inside (7 answers) Closed 4 years ago . Circle Images I can get circle borders using border-radius : img { border-radius: 50%; } Hexagonal Images I'm hoping to create hexagonal images though. I'm guessing that wrapping the images in a div / span (or a few of them) will be required. Something like either of these: For simplicity's sake, all images are square . Objective The point of getting images like this is to stack them

问题 At my website i want to make a speech bubble and found a great tutorial for doing so. But i want to do some changes, but i dont know how to. Basicly i want to flip the little triangle horizontally, so its vertical on the right side instead of the left. Here is the CSS: .bubble { margin-top: 100px; position: relative; width: 200px; height: 100px; text-align: center; line-height: 100px; background-color: #fff; border: 8px solid #666; -webkit-border-radius: 30px; -moz-border-radius: 30px; border

问题 This question already has answers here : Speech bubble with arrow (3 answers) Closed 4 years ago . I have a rounded div tooltip of a variable height that contains some scrolling content. On the left of it is an arrow that points to the element that triggered it being shown. The arrow can be located anywhere on the left side and the height of the tooltip container varies. Currently I have the arrow implemented as a css triangle with ::before and ::after pseudo-elements for the background and

问题 I'm wondering if there's an "easy" way to do something like below using CSS3, I want to avoid using images and absolute positioning, or similar, and would prefer to use some CSS method to achieve this. I would also like to avoid using any fixed heights for this style too, since I'll be using the same style on various elements that all vary in size and colour. 回答1: You can use a simple clip-path in the CSS: clip-path:polygon(0 0, 100% 0, 95% 50%, 100% 100%, 0 100%, 5% 50%); Result (in Chrome):