css-shapes

问题 Effect I want to achieve: Very similar questions: How can I wrap text around a non rectangular image? - but the other way around ( they want to wrap text around, I want to keep text inside) Wrapping text around non-rectangular shapes css/html Potential solutions: http://www.csstextwrap.com/ - a bit dated - mentions IE6 and Netscape, does not mention Chrome http://baconforme.com/ As in Novemeber 2015 - can we do better than that? I managed to find this article about CSS shapes - http://www

问题 I am trying to make the following slanted div. I have nearly achieved the shape below however the bottom is not slanting in the correct direction as my shape below. How can i correct this? Shape Attached http://jsfiddle.net//fgdcq3qp/ CSS .slanted { background: red; box-sizing: border-box; height: 40vh; width: 100%; position: relative; padding: 20px; } .slanted:before { content: ""; background: red; height: 40px; transform: skewY(2deg); position: absolute; left: 0; right: 0; z-index: -1; }

问题 Is it possible to create the curved sail shape below using HTML and CSS only? I can see from this answer that I could create a straight-sided sail using: #triangle { width: 0; height: 0; border-right: 50px solid transparent; border-bottom: 100px solid red; } which looks like: or I can get a bit closer with border radius: #sail { background: #ff0000; width: 50px; height: 100px; border-top-right-radius: 50px 100px; -moz-border-radius-topright: 50px 100px; -webkit-border-top-right-radius: 50px

问题 As you might have guessed this image is part of a mail envelope shape which I would like to create with CSS3 if possible. I've made the other parts but this one's tricky. The shape needs both a triangular cut on both sides and rounded corners (presumably border-radius-bottom-left/border-radius-bottom-right). It also has to have the ability to cast a small shadow. This is what I've done so far - #envelope { background: #fff; } .closed { width: 860px; height: 0; border-top: 80px solid fff;

问题 I'm trying to create an CSS button hover effect . But I didn't manage to fill the element with a slanted shape. How the hover effect was planned: Screenshot 1: How it looks actually. Screenshot 2: How I want the hover effect to look like with slanted side. .button_sliding_bg { color: #31302B; background: #FFF; padding: 12px 17px; margin: 25px; font-family: 'OpenSansBold', sans-serif; border: 3px solid #31302B; font-size: 14px; font-weight: bold; letter-spacing: 1px; text-transform: uppercase;

问题 How It Works The .png image represented below is clipped to the text with animation; In Action body { background: #000000; } .Wave-Loader { text-transform: uppercase; font-family: 'Cabin Condensed', sans-serif; font-weight: bold; font-size: 100pt; text-align: center; height: 120px; line-height: 110px; vertical-align: bottom; position: absolute; left: 0; right: 0; top: 100px; bottom: 0; } .Wave-Loader.Wave { background-image: url("http://i.imgur.com/uFpLbYt.png"); -moz-background-clip: text;

问题 I'm trying to figure out how to best mask a div with an angular shape like so--if the top div in this case will be a background image, and both divs would be 100% width: I've seen lots of tutorials out there on how to mask an image with a circle shape, but none on how you would mask the border of a div like the red area. I know there must be a better way than doing this with bitmaps, but am at a loss. Would it be best to do this with clip-path or SVG? I'm not all that concerned about older

问题 Need to add gradient effect for borders. borders are triangle shaped here is the jsfiddle code .progress-indicator-wrapper { margin: 0 10px; font-size: 16px; color: #2f2f2f; background-image: linear-gradient(to bottom, #e7e7e7, #d8d8d8); } .progress-indicator { display: table; width: 100%; text-align: center; line-height: 20px; } .progress-indicator > div { display: table-cell; margin-top: 0; padding: 20px; position: relative; } .progress-indicator > div.progress-active::before { content: " "

问题 I drew a cloud via CSS3 using different div tags I am trying to add a border to the whole shape but I am having trouble since every shape get its own border how can I apply a border to the whole cloud? HTML: <div id="cloud"> <div id="bottom_c"></div> <div id="right_c"></div> <div id="left_c"></div> </div> CSS: * { margin: 0; padding: 0; border: 0; } body{ background-color: #4ca3ff; } #cloud { position: absolute; } #bottom_c { position: relative; top: 200px; left: 500px; width: 350px; height:

问题 tl;dr: I would like to create an actual 3d sphere with CSS - not just an illusion Note: some of the snippet examples are not responsive. Please use full screen. With pure CSS you can create and animate a 3d cube like so: #cube-wrapper { position: absolute; left: 50%; top: 50%; perspective: 1500px; } .cube { position: relative; transform-style: preserve-3d; animation-name: rotate; animation-duration: 30s; animation-timing-function: linear; animation-iteration-count: infinite; } @keyframes