Adding borders to triangle built as borders [duplicate]

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>

Answer 1

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>