css-shapes

问题 I have a css code: -moz-border-radius-topleft:50px; I get the result: Is there any possibilities to give like this: 回答1: Just to update this, it seems you can in multiple ways. Lea Verou posted a solution Here is mine using border-image Using border image html <div><img src="https://s3.amazonaws.com/resized-images-new/23292454-E6CD-4F0F-B7DA-0EB46BC2E548" /></div> css div { width: 200px; border-width: 55px; -moz-border-image: url(http://i47.tinypic.com/2qxba03.png) 55 repeat; -webkit-border

问题 I\'m building a wizard-like ordering process where I have this menu: The active page is colored green (in this case, Model). How does one make this arrow using only CSS?: At the moment i\'m achieving my goal by using several divs and images: <div class=\"menuItem\"> <div></div> <!-- The left image --> <div>Varianten</div> <div></div> <!-- The right image --> </div> The left image: The right image: I found a SO answer which does part of this: Arrow Box with CSS, however i\'m having trouble

问题 Attempting to use a custom hex color for my css triangle (border). However since it uses border properties I am unsure how to go about doing this. I would like to steer clear of javascript and css3 simply because of compatibility. I am trying to have the triangle have a white background with a 1px border (around the angled sides of the triangle) with color #CAD5E0. Is this possible? Here\'s what I have so far: .container { margin-left: 15px; width: 200px; background: #FFFFFF; border: 1px

问题 I loaded in multiple images on my website from the internet. Is it possible to give all those images an hexagon shape in a responsive grid? <div> <img src=\"link\" class=\"Image\"> </div> <div> <img src=\"link\" class=\"Image\"> </div> ... I found multiple ways to do this but you needed to fill in the image src in the CSS code. This isnt possible for me cause the website loads in random images from the internet with jQuery so I can\'t use background images. I tried this: http://jsfiddle.net

问题 Is there any way to make a transparent text cut out of a background effect like the one in the following image, with CSS? It would be sad to lose all precious SEO because of images replacing text. I first thought of shadows but I can\'t figure anything out... The image is the site background, an absolute positioned <img> tag 回答1: It's possible with css3 but it's not supported in all browsers With background-clip: text; you can use a background for the text, but you will have to align it with

问题 I would like to make a transparent cut out half circle shape using only CSS3. The only requirement is that all the elements that form the shape must be black or transparent . I cannot use a black rectangle with a white circle on top of it because the half circle has to be transparent and let the background show through. Desired shape : 回答1: May be can do it with CSS :after pseudo property like this: body { background: green; } .rect { height: 100px; width: 100px; background: rgba(0, 0, 0, 0.5

问题 My problem is that I cannot horizontally center a triangle pointer. Well, I can center the pointer for some window sizes, but when I shrink or extend the window it places it in the wrong place again. What am I missing? body { background: #333333; } .container { width: 98%; height: 80px; line-height: 80px; position: relative; top: 20px; min-width: 250px; margin-top: 50px; } .container-decor { border: 4px solid #C2E1F5; color: #fff; font-family: times; font-size: 1.1em; background: #88B7D5;

问题 There\'re plenty of different CSS shapes over at CSS Tricks - Shapes of CSS and I\'m particularly puzzled with a triangle: #triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; } <div id=\"triangle-up\"></div> How and why does it work? 回答1: CSS Triangles: A Tragedy in Five Acts As alex said, borders of equal width butt up against each other at 45 degree angles: When you have no top border, it looks like

问题 I have a project where I need to insert speech bubbles / message boxes . The general shape I am trying to achieve is this one : .bubble { height: 100px; width: 200px; border: 3px solid gray; background: lightgray; position: relative; cursor:pointer; } .triangle { width: 0; border-top: 20px solid black; border-left: 20px solid transparent; border-right: 20px solid transparent; cursor:pointer; } <div class=\"bubble\">Speech bubble </div> <div class=\"triangle\"> </div> This currently does not

问题 This question already has answers here : CSS technique for a horizontal line with words in the middle (21 answers) Closed last year . I want to create a line before and after a centered title . The line and text must have a transparent background to be able to position them on a uneven background. The line must not be 100% width, like this: The text of the title can change: Width of title isn\'t known The title can span on several lines h1 { text-align: center; border-bottom: 1px solid #000;