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>

Stickers · Accepted Answer · 2017-02-27 15:41:19Z

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>

Community · Accepted Answer · 2017-05-23 12:00:16Z

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, 2017 at 12:00

CommunityBot

11 silver badge

answered Feb 27, 2017 at 14:55

Plenarto

6494 silver badges17 bronze badges

Collectives™ on Stack Overflow

Adding borders to triangle built as borders [duplicate]

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related