css-shapes

问题 This question already has answers here : Slanted diagonal line in html or css? (6 answers) Closed 4 years ago . I need to something like this But above an image, here is my first attempt but it doesn't work http://jsfiddle.net/wo8gbhx3/17/ And this is my markup (now) HTML <div class="testing"> <ul> <li class="selected unavailable"> <a href="#"> <img src="http://placehold.it/25x25"/> </a> </li> </ul> </div> CSS .testing ul { list-style: none; } .testing ul li { width: 25px; height: 25px;

问题 I need to make a circular progress bar (image below), loading start from left bottom side up to right bottom side. Light-blue (#E8F6FD) color is empty state and strong-blue (#1CADEB) is progress. I have tried some approaches, but cannot find the best one for this implementation: First of all I tried using a div element with border-radius: 50%; and border-bottom-color: transparent; , jsfiddle. In this approach I got a shape exactly like in image but the problem is how can I fill border with

问题 I want to add a label on some of my elements on a website and design for a label that is a flag with an inverted V-shaped cut at the bottom. So far I have this: HTML <div class="css-shapes"></div> CSS .css-shapes{ border-left: 99px solid #f00fff; border-right: 99px solid #f00fff; border-bottom: 39px solid transparent; } http://jsfiddle.net/yhexkm4u/2/ However, I need the background to be white and border around this shape in purple and 1px. I was trying to fit the same shape just in white

问题 I need to make a div that looks like this: With text in the middle in css. I tried looking at transforms and other 3d stuff, but I couldn't figure it out, especially without ruining the text. 回答1: You can use a skewed Y pseudo element as a background of the element. This won't affect the content : div { position: relative; display: inline-block; padding: 20px 50px; overflow: hidden; } div:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #FFD505

问题 My target is to implement a pure-CSS flag-shape container like this: Requirements include: background-color of parent container is unknown works for different line-height and font-size settings 回答1: Option 1 Use clip-path, but check browser support for this property: div { clip-path: polygon(0% 0%, 100% 0%, 85% 50%, 100% 100%, 0% 100%); background-color: #ff69b4; /* styles for demo */ padding: 20px; color: #fff; } <div>5 items</div> Option 2 Use SVG: <svg xmlns="http://www.w3.org/2000/svg"

问题 I don't know if this is possible with CSS but it's worth asking. I want to have a trapezoid shape be transparent in the middle (hollow) with formatted text inside of it (and a small image as well). It also has to be responsive. Here is a mockup of what I mean: Is this posible with CSS? I know how to make a trapezoid shape but I haven't figured out how to get text inside it and have it be hollow (only the outline of the shape). 回答1: If the width / height of the trapezoid shape should be

问题 I have a container element that I am trying to figure out if I can shape it to have two 45 degree angles. Like this: It is simply a rectangle now: <div id="home-img-text"> <div id="home-img-text-container"> <div id="home-img-text-description">WRECKING <br>& DEMOLITION <br> DONE RIGHT.</div> </div> </div> #home-img-text-container { background: rgba(0,0,0,.8); padding: 30px 20px; } #home-img-text-description { color: #FFF; font-size: 2.5em; line-height: 1.4em; } How would I go about doing this?

问题 please take a look at the image My Challenge ist the following. The Blue is a div with a background image. The angle should be -6deg. In this div we have transparent png (here the 2 people). The Peoples head are allowed ^^° to get out of the div. but not the legs. And the Image should be animated so that they can "walk" from left to right. The Problem is for me, that i have no Idea how to archiv the part with heads can "leave" the box but the legs need a "overflow" hidden. The Blue box should

问题 I'm trying to hide the standard arrow from the select dropdown list. I've resolved it for all browsers, thanks to stackoverflow.com, but still can't remove or hide it for the Opera (my current version is Opera 12.16). Pure css solution is needed. select { background: url(/path/to/the/arrow.png) no-repeat center right; -webkit-appearance: none; -moz-appearance: none; appearance: none; text-indent: 0.01px; text-overflow: ''; } /*IE*/ select::-ms-expand { display: none; } /*FF*/ @-moz-document

问题 I want to create the following shape: Important: if I use "Border Radius" I get this (and I do not want this result): 回答1: Here are DEMO HTML: <div id="gray"> <div id="red"></div> </div> CSS: #gray{ height: 100%; background-color: #ccc; overflow: hidden; } #red{ width: 150%; height: 150%; background-color: #f00; border-radius: 100%; top: 50%; left: -25%; right: 0; position: relative; } 回答2: Something like this would be roughly equivalent: http://jsfiddle.net/ny4Q9/ css: .curvetop { position: