CODEWITHSUNDEEP
htmlcss
Ilja
Ilja

Reputation: 46479

Achieving embossed/slanted/3d border effect with css

I'm trying to figure out how to achieve following border at the bottom of the element by using only css, and making it as crosbrowser friendly as possible

Sample code, with standard border

<div class="object"></div>

.object {
    width: 200px;
    height: 45px;
    background-color: orange;
    margin: 20% auto 0 auto;

    border-bottom: 5px solid green; /*Needs to be changed to get effect*/
}

enter image description here

Upvotes: 1

Views: 1783

Answers (1)

Sunyatasattva
Sunyatasattva

Reputation: 5840

Here you go, an example using some pseudo elements and CSS border magic. Note that you have to know the parent element's background color for this to work. Using :after this should be compatible with IE8+ and fallback gracefully in older browsers, as per your requirement.

This works by understanding that the CSS directional borders are cut at 45° in their direction, in order for you to be able to style the different sides differently (e.g. border-right cuts border-top and border-bottom and so on). By clever usage of border properties and position, you can create the effect of angled shapes.

Creating a centrally embossed 3d effect would not need, because of this reason, any other element but using the borders carefully.

central 3d emboss

Such effect can be achieved by just setting the border-bottom to the color and the right and left to transparent.

However, since you want an additional cut, we make use of a pseudo element, giving it a triangle shape and overlapping it over the parent elements border; in this way we get what you need.

Working example

Upvotes: 1

Related Questions