0

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

user3242861
  • 1,839
  • 12
  • 48
  • 93

3 Answers3

6

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
  • 7,431
  • 18
  • 59
  • 84
Stewartside
  • 20,378
  • 12
  • 60
  • 81
  • 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 – user3242861 Jun 09 '17 at 11:08
  • 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. – Stewartside Jun 09 '17 at 11:09
  • I create a question! If you want to see my problem check this link please. Thank you. @Stewartside https://stackoverflow.com/questions/44456733/bootstrap-integrate-shape-menu-with-bootstrap-menu – user3242861 Jun 09 '17 at 11:33
0

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>
Asons
  • 84,923
  • 12
  • 110
  • 165
-1

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>
Nikita Goncharov
  • 208
  • 1
  • 6
  • _"I already try with border or border-width but doesn't work."_ – j08691 Jun 02 '17 at 14:16
  • 1
    Ok. But i want to put border also on left side. @NikitaGoncharov – user3242861 Jun 02 '17 at 14:19
  • Then instead border use : border-left – Nikita Goncharov Jun 02 '17 at 14:20
  • 1
    @NikitaGoncharov `border` implies borders in all directions, including on the left. That's not gonna work.. – George Jun 02 '17 at 14:21
  • 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: https://codepen.io/bennettfeely/pen/azJWWX/ – Nikita Goncharov Jun 02 '17 at 14:29