css-shapes

I'm trying to create in a single box, two arrows, one as a pointer and the other one into the box just behind. Can not find the way to get the arrow right behind. Someone can help me?? here i post the link with the sample: http://jsfiddle.net/7Esu2/ CSS: .arrow { width:210px; height:40px; background-color:#CBCBCB; border: 1px solid #CBCBCB; position:relative; text-align:center; font-size:20px; font-weight:bold; line-height:40px; } .arrow:after { content:''; position:absolute; top:-1px; left:210px; width:0; height:0; border:21px solid transparent; border-left:15px solid #CBCBCB; } .arrow:before

I would like to create a custom shape like this image : how can I do ? My CSS : #chevron { position: relative; text-align: center; padding: 12px; margin-bottom: 6px; height: 60px; width: 200px; } #chevron:before { content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 51%; background: #337AB7; -webkit-transform: skew(0deg, 6deg); -moz-transform: skew(0deg, 6deg); -ms-transform: skew(0deg, 6deg); -o-transform: skew(0deg, 6deg); transform: skew(0deg, 6deg); } #chevron:after { content: ''; position: absolute; top: 0; right: 0; height: 100%; width: 50%; background: #337AB7; -webkit

I want to achieve the below shape using border-corner-shape property. But it doesn't work. My code is available below: .left-1 { background-color: #3498DB; border-corner-shape: scoop; border-radius: 30px; width: 200px; height: 200px; } <div class="left-1"></div> Why does it not work? Using Radial Gradients: Here is another alternative method to achieve the border corner scoop effect using radial gradients. In this method, we use multiple radial gradients and position them at the corners. .border-scoop { height: 300px; width: 300px; background: -webkit-radial-gradient(0% 100%, circle,

I want to make a menu, in which the ends of the menus overlap and they have curved borders and slightly slanting edges. Without using a background image, is it possible to do such a menu with only CSS? For better understanding, have attached the sample of menu below. Want to know how to make the parts marked in red using CSS alone. Please help, thanks in advance. Skew the :before and :after pseudo elements, set pseudos to some - offset add left-top border-radius to :before and right-top to :after if needed (to remove the top hard edge) add top border radius to the A element add z-index:1; to

I need to recreate the following design using only CSS : What you're seeing in the picture is the top of a website container - the "links" are part of the main menu. As it stands, I've created the container but I'm not sure how to go about making the slant on the navigation without using an image. For the record: I'd rather not use an image as the chances of the box shadow on the slant matching up with box shadow rendered by the browser are slim-to-none, especially when it comes to multiple browsers. I was thinking along the lines of a positioned and rotated div with a white background and a

I need to make like this. Is it possible with pure css? Using border-radius , :before and transform: skew(...); body { background-color: #000; margin: 0; padding: 0; font-family: sans-serif; font-size: 16px; } .tab { height: 50px; width: 150px; border-radius: 15px 15px 0px 0px; background-color: #FFF; position: relative; top: 10px; left: 1px; display: inline-block; z-index: 2; } .tab:before { height: 50px; width: 70px; border-radius: 10px 10px 0px 0px; background-color: white; content: ""; position: absolute; left: 104px; top: 0px; -webkit-transform: skewX(40deg); transform: skewX(40deg); z

I need to create an input text box with a bottom border and the side borders should span half the height of the input on left and right. Is there an easy way to design this in CSS ? Image is show below: Criss Lion Maybe this could be an elegant solution. If you use background then you can specify really nicely where what goes and it improves readability a bit. input[type="text"] { padding: 10px; background: linear-gradient(#000, #000), linear-gradient(#000, #000), linear-gradient(#000, #000); background-size: 1px 20%, 100% 1px, 1px 20%; background-position: bottom left, bottom center, bottom

I want to achieve the following shapes using pure CSS, no images. I've come to the following point. Here is the HTML structure: <div class="sixteen columns"> <div id="applicationStatus"> <ul> <li class="applicationStatus">Application Received</li> <li class="applicationStatusGood">Language Exam</li> <li class="applicationStatusNoGood">Oral Exam</li> <li class="applicationStatus">Grant</li> </ul> </div> </div> And here is the CSS : #applicationStatus { position: relative; width: auto; height: 140px; left: 40px; } ul.applicationStatus { list-style: none; } li.applicationStatus, li