Adding borders to triangle built as borders

Question

I am trying to add red borders to the triangle in the top left corner of the dropdown. But the problem is that the triangle itself is built as borders. So I've got no idea how to do that. Help me please.

.dropdown {
  position: relative;
  vertical-align: middle;
  display: inline-block;
}

.dropdown-content {
  position: absolute;
  min-width: 160px;
  background-color: yellow;
  padding: 12px 16px;
  margin-top: 20px;
  z-index: 1;
  border-color: red;
 border-width: thin;
 border-style: solid;
}

.dropdown-content a{
  display: block;
}

.dropdown-content:after {
    position: absolute;
    left: 70%;
    top: -20px;
    width: 0;
    height: 0;
    content: '';
 border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 20px solid yellow;
}

<div class='dropdown'>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

Stickers · Accepted Answer · 2017-02-27T15:41:19.547

You can add the triangle borders with another pseudo element.

.dropdown-content:before,
.dropdown-content:after {
  position: absolute;
  left: 70%;
  width: 0;
  height: 0;
  content: '';
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom-width: 20px;
  border-bottom-style: solid;
}
.dropdown-content:before {
  top: -21px; /* extra -1 pixel offset at the top */
  border-bottom-color: red;
}
.dropdown-content:after {
  top: -20px;
  border-bottom-color: yellow;
}

.dropdown {
  position: relative;
  vertical-align: middle;
  display: inline-block;
}

.dropdown-content {
  position: absolute;
  min-width: 160px;
  background-color: yellow;
  padding: 12px 16px;
  margin-top: 20px;
  z-index: 1;
  border-color: red;
  border-width: thin;
  border-style: solid;
}

.dropdown-content a {
  display: block;
}

.dropdown-content:before,
.dropdown-content:after {
  position: absolute;
  left: 70%;
  width: 0;
  height: 0;
  content: '';
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom-width: 20px;
  border-bottom-style: solid;
}

.dropdown-content:before {
  top: -21px; /* extra -1 pixel offset at the top */
  border-bottom-color: red;
}

.dropdown-content:after {
  top: -20px;
  border-bottom-color: yellow;
}

<div class='dropdown'>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

score 0 · Answer 2 · edited May 23 '17 at 12:00

0

Try creating inner triangle which is smaller.

Check this answer: Adding border to CSS triangle

And this: CSS triangle custom border color

edited May 23 '17 at 12:00

Community

1
1

answered Feb 27 '17 at 14:55

Plenarto

639
3
16

Adding borders to triangle built as borders

2 Answers2