css-shapes

I've tried the perspective solution here How to transform each side of a shape separately? but can't get it to work probably due to the irregularness of the shape. Only the top and right side columns are slanted, vertical and bottom are straight. How can I do this with CSS? Oriol Using CSS borders you can create triangles and trapezoids. You can achieve your shape joining a triangle and a trapezoid. .triangle { border: 0 solid red; border-left-width: 500px; border-top-width: 30px; border-top-color: transparent; } .trapezoid { border: 0 solid red; width: 500px; border-bottom-width: 150px;

I'm able to create the same button with CSS. The rounded corners are the important part corners are the main reason. Triangle button with rounded corners, please see my below code and image .lngbtn { position: relative; width: 150px; height: 50px; margin: 50px; color: #FFFFFF; background-color: #f4d046; text-align: center; line-height: 48px; padding: 16px; font-weight: bold; } .lngbtn:before { content:""; position: absolute; right: 100%; top:0px; width:0px; height:0px; border-top:25px solid transparent; border-right:30px solid #f4d046; border-bottom:25px solid transparent; } .lngbtn:after {

I am aware this has been answered previously however that was for the bottom of a div and I cannot work out how to do it for the left and right of a div. I am trying to acheive the same effect as this: BODY { background: url(http://farm6.staticflickr.com/5506/9699081016_ba090f1238_h.jpg) 0 -100px; } #wrapper { overflow: hidden; height: 116px; } #test { height: 100px; background-color: #ccc; position: relative; } #test:before { content: ""; position: absolute; left: -6px; width: 50%; height: 16px; top: 100px; background-color: #ccc; -webkit-transform: skew(-40deg); -moz-transform: skew(-40deg);

How do I draw a small circle at the end tip of a progress circle, plus adding a small text block below / above it? Example img: <div class="radial-progress" data-progress="0"> <div class="circle"> <div class="img"></div> <div class="mask full"> <div class="fill"></div> </div> <div class="mask half"> <div class="fill"></div> <div class="fill fix"></div> </div> <div class="shadow"></div> </div> <div class="inset"> <div class="percentage"> <div class="numbers"><span>-</span><span>0%</span><span>1%</span> <!--- lots of spans ---> </div> </div> </div> Thanks to Andre's medium.com article, I've

How would I create a DIV containing an IMG where the DIV cuts the image into a triangle, thereby displaying only part of the image though a triangle. so.. <div> <img src='some_image' /> </div> Where the image is a square, but the DIV containing the image is a triangle. http://www.script-tutorials.com/creating-kaleidoscope-using-jquery-and-css/ solves this very well except this solution is not x-browser friendly (non-ie). http://css3pie.com/ looks interesting, however this relies on PHP. You can't create a non-rectangular DOM element. There are a few ways to hack it. Firstly, there is a method

I've been wondering if this is possible. A block of text surrounding an image. In this case it is circlular. I have been able to nudge text to the side using the shape but not entirely encase it. I have only managed to find one example and I was unable to recreate it from the example actually given: web-tiki I don't know a way of wrapping text around a cicle the way it is done in your mokup. As commented, for a better user experience, the text should be seperated in two paragraphs and wrapped on each side of the circle. In this configuration you can wrap the text around the circle. But beware