I am trying to achieve this (yellow) without an image:
The most detailed border-generator I found is this generator available in MDN.
It doesn't work with it though. Is there another approach?
Add a comment |
3 Answers
Yes, this can be achieved using a combination of an inset box-shadow and a border-radius on the bottom left hand side.
The border-radius on the bottom left side produces the curved bottom side and the inset box-shadow produces the colored area. The curvature of the bottom side (both inner and outer) can be increased/decreased by adjusting the border-radius on the parent container.
.bordered { position: relative; width: 300px; height: 75px; padding-left: 25px; background: transparent; border-bottom-left-radius: 40px; box-shadow: inset 100px -15px 0px darkorange; text-transform: uppercase; font-weight: bold; font-size: 12px; } .bottom-right { position: absolute; right: 10px; bottom: 2px; color: black; font-size: 11px; } /* just for demo */ body { background: black; }<div class="bordered"><span>Schematic</span> <span class="bottom-right">1234567890</span> </div>1 Comment
Harry
@PrimuS: Nice to know that you liked it :)
A slight alternative on @Harry's solution would be to make use of pseudo elements:
.orange { position: relative; height: 150px; width: 500px; background: darkorange; border-radius: 0 0 0 100px; } .orange:before { content: ""; height: 80%; width: 80%; position: absolute; background: black; top: 0; right: 0; border-radius: 0 0 0 100px; } .bot { position: absolute; height: 20%; right: 0; bottom: 0; } /*Demo purposes only*/ html,body{background:black;}<div class="orange">Hello, world! <div class="bot">MORE!!</div> </div>1 Comment
jbutler483
@PrimuS: Harry's solution is still probably the one to go for, this is just an alternative.
Yes, it is possbile with CSS3. However, since the border-radius is not supported in all browsers, you need to add the browser prefixes. This generator will help you: http://border-radius.com/
3 Comments
web-tiki
border radius is well suported without vendor prefixes
web-tiki
-moz- isn't needed since FF 3.6 and -webkit- since chrome 4 or safari 4
PrimuS
I know, but that would come afterwards. With the link you gave me, the above is also not possible to generate. If I understand the border-radius thing correctly, the rounding directly under "SCHEMATIC" would be negative? Bottom left is easy, the "inner" rounding is what gets me stuck.