如何使下拉菜单透明，只有可见项成为按钮内的箭头和右边框？

Question

在这里，我需要下拉按钮是透明的，但是如果我做background:transparent;，只有可见的东西是边框，我需要它是出现在下拉按钮和右边框内的箭头图标。 这是代码

<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Regular</a>
<a class="dropdown-item" href="#">Link 2</a>
</div>
</div> 

<<这就是我所需要的

Answer 1

像这样吗？

.dropdown-toggle {
  background:transparent;
  color: black;
  border-width: 0 1px 0 0;
}

<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Regular</a>
<a class="dropdown-item" href="#">Link 2</a>
</div>
</div> 

在这里使用引导程序：https://codepen.io/anon/pen/EGZNKd

箭头是白色的，因此当您使背景透明时，如果后面的背景也是白色，则看不到它。所以我把它变黑以使其可见。

注意：此CSS选择器将更改所有下拉按钮，因此您可能需要使其更加具体。

编辑：已更新以显示右边框。