I need to add a border color to a css shape but i don't know how to do that. I already try with border or border-width but doesn't work.

This is my code:

.shape { width: 400px; height: 40px; background-color: green; -webkit-clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%, 0 100%); clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%, 0 100%); } <div class="shape"></div>

Thank you

asked Jun 2, 2017 at 14:12

user3242861's user avatar

5

Pseudo-Element

A nice way to do this would be with a pseudo-element like a :before

Make exactly the same shape but slightly smaller which holds the main color you want and position it correctly and you get the border you want.

.shape { width: 400px; height: 40px; background-color: black; -webkit-clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%, 0 100%); clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%, 0 100%); position: relative; } .shape:before { content: ''; width: 398px; height: 38px; -webkit-clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%, 0 100%); clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%, 0 100%); background: green; display: block; position: absolute; top: 1px; left: 1px; } <div class="shape"></div>

Graham's user avatar

Graham

7,86020 gold badges67 silver badges92 bronze badges

answered Jun 2, 2017 at 14:22

Stewartside's user avatar

3 Comments

Hi @Stewartside, this code is to apply in bootstrap menu. Right now i'm having a problem. The sub-menus doesn't show because we define fixed height. How can i solve this problem using this shapes? Thank you

2017-06-09T11:08:10.887Z+00:00

If you can get a demo setup ill look at it but the implementation can be done 100 different ways and I dont know what way youve done it.

2017-06-09T11:09:49.563Z+00:00

A simple workaround is using a pseudo and transform: skew().

transform: skew() also has way better browser support than clip-path has.

.shape { position: relative; width: 380px; height: 40px; background-color: green; border: 2px solid red; margin-left: 25px; } .shape::before { content: ''; position: absolute; left: -20px; top: -2px; width: 40px; height: 100%; border: inherit; background-color: inherit; border-right-width: 0; transform: skewX(-30deg); } <div class="shape"></div>

answered Jun 2, 2017 at 14:26

Asons's user avatar

Try add this:

{ ... border: 1px black solid; ... }

Explain:

.shape { border: 1px black solid; width: 400px; height: 40px; background-color: green; -webkit-clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%, 0 100%); clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%, 0 100%); } <div class="shape"></div>

answered Jun 2, 2017 at 14:15

Nikita Goncharov's user avatar

5 Comments

"I already try with border or border-width but doesn't work."

2017-06-02T14:16:46.89Z+00:00

Ok. But i want to put border also on left side. @NikitaGoncharov

2017-06-02T14:19:29.263Z+00:00

Then instead border use : border-left

2017-06-02T14:20:35.147Z+00:00

@NikitaGoncharov border implies borders in all directions, including on the left. That's not gonna work..

2017-06-02T14:21:18.833Z+00:00

I guess why border dont adding this way - because left side is hidden, we can see this if we inspect element, so i find a way to resolve problem - parent element with necessary color with padding left equals to your expected border-size, just look: codepen.io/bennettfeely/pen/azJWWX

2017-06-02T14:29:23.067Z+00:00

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.