css-shapes

问题 I have been trying to make this shape in CSS. Ideally it will span the entire length of the browser window and probably extend outside the field of view to support larger screens and also be centered so that the angle does not change. Anyone have any solutions? Also I think I might run into a problem of the angle aliasing harshly. I might need to resort to using an image. Would like to use CSS though. ** Image Spelling Error. (Indefinitely not Inevitably) 回答1: A solution that doesn't require

问题 I wish to create a [ and ] bracket just with CSS. Is there a way to specify the top and bottom border (Without slicing the image) so it looks like a bracket? .bracket { border-top:20px; border-bottom:20px; border-right:none; border-left: 1px solid black; } 回答1: .b:after { content: "]" } .b:before { content: "[" } <span class="b">text</span> working example: http://codepen.io/yardenst/pen/bhGIy 回答2: You can draw square brackets without the use of any pseudo elements in pure css. Steps: Create

问题 Closed. This question is off-topic. It is not currently accepting answers. Want to improve this question? Update the question so it's on-topic for Stack Overflow. Closed 6 years ago . I'm wondering if it's possible to archive the following effect with CSS I found these articles that kind of help but the problem is that in my case the tab sides are diagonal not straight vertical lines: http://css-tricks.com/tabs-with-round-out-borders/ http://css-tricks.com/better-tabs-with-round-out-borders/

问题 I've got an audacious project and would like some advice. I want to have a site that uses CSS Diamonds, I've attached an image to give a better idea of what I am looking at doing. Here are the issues I have run into so far: The triangles are perfectly aligned until a submenu is added, then the right three shift to the right (this was working at one point). Also the li in which the submenu is under loses its diamond The text on the submenu diamonds are not centered. I cannot have the

问题 Is it possible to create a header div that is sheared/oblique like in the image below? Its for a mobile website 回答1: Yes, this is possible: DEMO .wrapper { overflow:hidden; height:300px; width:100%; background: url(http://placekitten.com/g/300/300); position:relative; } .top { background:gray; height:60%; width:130%; position:absolute; top:-30%; left:-5%; transform:rotate(5deg); border-bottom:10px solid white; } .text{ position:absolute; top:20px; right:10%; padding:10px; border-radius:10px;

问题 I have a div element with a triangle-border and I'm trying to place an image above it using an ::after pseudo-element with background-image . The method doesn't work though. However if I'm trying to set content: "asd"; , the text appears correctly. Basically I just want to have a house image above that triangle. Here's the HTML code: <div id = "estatecorner" class = "house"></div> And here's the CSS: #estatecorner { position: absolute; right: 0px; width: 0; height: 0; border-style: solid;

问题 For my online game UI, I decided to make Hill Climb Racing (Android Game) 's buttons. This is is what I have presently : body { color: white; font-family: Impact, fantasy; font-size: 40px; line-height: 100px; text-align: center; } .rect { height: 100px; width: 280px; background: #545D60; border-radius: 20px 50px 50px 20px; position: relative; } .rect:before { background: #545D60; content: ""; position: absolute; top: 6px; left: 195px; height: 0px; width: 0px; border-radius: 30px 10px; border:

问题 This question already has answers here : How to make triangle shape in before a div in pure css? (1 answer) How do CSS triangles work? (18 answers) Closed 5 years ago . http://nl.tinypic.com/r/jgm90h/8 I would like to know how to make a HTML button tag have the shape in the link above using pure CSS3. Can you guys help me out? 回答1: The trick is to use the pseudo classes :before and :after . Try it like this: .yourButton { position: relative; width:200px; height:40px; margin-left:40px; color:

问题 Creating a triangle using CSS is pretty easy and common practice, but is it possible to create a triangle in a similar way with a transparent background and just a border. This is what I would like to create: Given the way triangles are typically made, I dont really know where to start as they rely on pseudo elements and overlapping borders etc. This obviously cannot be done if the border is transparent... Does anyone have any ideas of how to do this? Is it even possible? 回答1: Use transform :

问题 I am trying to make an arrow that looks like this: However, this is the closest I can get to it: .button { margin: 4em 0; padding: 2em; width: 15%; margin: 0 auto; text-align: center; background-color: #000000; color: #ffffff; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -moz-flex-flow: row wrap; -webkit-flex-flow: row wrap; -ms-flex-flow: row wrap; flex-flow: row wrap; webkit-justify-content: center; justify-content: center; } .curved-arrow { display: inline