Add a border to the shape in CSS

Asked Oct 11 '21 at 13:45

Active Oct 11 '21 at 13:48

Viewed 39 times

I have a shape been rendered using CSS. I want to add a black border(#000) on the shape created. Thanks for your help.

.arrow-pointer {
  width: 150px;
  height: 50px;
  background: #32557f;
  position: relative;
  margin-left: 25px;
  color: #fff;
}

.arrow-pointer:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-left: 25px solid #fff;
  border-top: 25px solid transparent;
  border-bottom: 25px solid transparent;
}

.arrow-pointer:before {
  content: '';
  position: absolute;
  right: -25px;
  bottom: 0;
  width: 0;
  height: 0;
  border-left: 25px solid #32557f;
  border-top: 25px solid transparent;
  border-bottom: 25px solid transparent;
}

<div style="display:flex">
  <div class="arrow-pointer"></div>
  <div class="arrow-pointer"></div>
</div>

edited Oct 11 '21 at 13:48

isherwood

58,414
16
114
157

asked Oct 11 '21 at 13:45

Erick

1,098
10
21

1

I recommend you to use and SVG as background-inline instead. There is no easy way to do this, it would be a hacky css. – Derian André Oct 11 '21 at 13:52
Can't very well put a border on a border. :) Box shadow won't work, either. – isherwood Oct 11 '21 at 13:52
1

The answer on this post looks simular to your question: https://stackoverflow.com/questions/35280191/border-on-custom-shape. – SecretTimes Oct 11 '21 at 13:52
I was about to suggest SVG as well. Failing that you could have a slightly larger black arrow behind the blue one. – Mike Poole Oct 11 '21 at 13:53

Add a border to the shape in CSS

0 Answers0