Join a triangle and a div http://jsfiddle.net/togwsmme/21/ .btn { width: 100px; height: 100px; background: red; float: left; } .rit { float: left; width: 0; height: 0; border-top: 100px solid red; border-right: 100px solid transparent; } <div class=”btn”>Content</div> <div class=”rit”></div> 5 solved How do I create a trapezoidal button using CSS? [duplicate]
I think this is what you are looking for.. .border1{ width:100px; height:100px; border-left: 10px solid #ccc; } .border2{ width: 100px; height: 100px; display: block; margin-left: 15px; border-left: 3px solid #ccc; } <div class=”border1″> <div class=”border2″></div> </div> Check it and let me know if you want any thing else.. 2 solved How to make double border … Read more
You should post the code what tried so far. Any way try this one. body { background-color: #333; text-align: center; padding-top: 20px; } button { background: beige; border-radius: 3px; box-shadow: 0px 5px 0px maroon; border: 0; color: #333; font-size: 17px; padding: 10px 30px; display: inline-block; outline: 0; } button:hover { background: #eaeab4; box-shadow: 0px 5px … Read more
Using a solid background? If you are using a solid colour background, you could use a pseudo element to ‘cover it up’ .wrap { position: relative; height: 300px; width: 300px; } .img { height: inherit; width: inherit; background: url(http://lorempixel.com/300/300); position: relative; overflow: hidden; z-index: -2; } .img:before { content: “”; position: absolute; top: 100%; lefT: … Read more
Use clipping with polygon. My polygons go from upper left, to upper right, to lower right, to lower left. I used the css calc function in order to make the offset relative to the end. I did a 40px slant, but if you want more a slant, simply change that number. body { background:black; } … Read more
you should share what you have tried when asking a question this is not a code making site. we help you debug your pre-existing code. but anyway, here is an example of what you want to achieve ( i guess you are interested in the css-styles of the button eg shadows, borders etc. ) the … Read more
Please check updated code .curv{ width: 800px; margin: 0 auto; position: relative; padding-top: 100px; overflow: hidden; } .curv:before{ background: #333; height: 200px; left: -20px; right: -20px; top: 10px; content: ”; position: absolute; border-radius: 100% 100% 0 0; } .holder{ height: 200px; background: #333; position: relative; z-index: 9999; } <div class=”curv”> <div class=”holder”></div> </div> 3 solved … Read more
This is a shape seemed to the shape you need, you have to make some tricks with the borders and transform, also you need use :after and :before selectors to build this kind of shapes. #diamond-shield { width: 0; height: 40; border: 50px solid transparent; border-bottom: 50px solid orange; position: relative; top: -10px; left: 250px; … Read more
In order to ensure both browser compatibility AND a gradient/image background, you may find you will have to use multiple elements, as well as a pseudo element on each of the nested divs. A quick mock up can be seen below. html { background: radial-gradient(red, black); } div.wrap { height: 300px; width: 300px; position: relative; … Read more
.div { position: relative; overflow: hidden; padding: 50px 0; } .div-inner { position: relative; background: black; height: 120px; } .div-inner:before, .div-inner:after { box-shadow: 0 0 0 80px #000; border-radius: 100%; position: absolute; height: 150px; /* You can change it */ content: ”; right: -20%; left: -20%; top: 100%; } <div class=”div”> <div class=”div-inner”></div> </div> 0 … Read more
You can do something like this, using a pseudo selector of after. CODEPEN LINK CSS div { height: 200px; background: blue; position: relative; width: 400px; } div:after { content: ”; position: absolute; top: -50px; left: -200px; border-top: 300px solid white; border-left: 300px solid white; width: 0; background: #fff; border-radius: 300px; } solved How to make … Read more