Установить прозрачный цвет фона div над черной родительской границей

Question

Я пытаюсь создать какое-то меню селектора, в котором есть активные и неактивные элементы, и в зависимости от того, какой из них выбран, он показывает одно или другое.

Я установил границу для меню и содержимого, но я хотел бы сделать его «подключенным», удалив нижнюю границу, когда вы выберете другую опцию меню. Это выглядело отлично, так как я решил установить прозрачный цвет фона для этого: rgba (150,150,150,0.5). Граница от родителя видна, потому что фон выбранного дочернего меню не является сплошным.

Упрощенная HTML:

<div class="menu-alias fac"> 
    <div id="menu_fac_1" class="alias afac aliselected"> 
    <a style="cursor:pointer" onclick="facalias(1);" class="alias-fac-a">D</a> 
    </div> 
    <div id="menu_fac_0" class="alias afac ali-nuevo"> 
    <a style="cursor:pointer" onclick="facalias(0);" class="alias-fac-a">+</a> 
    </div> 
</div> 

<div class="facturacion" id="fac_1" style="display: block;"> 
    <label for="acc_f_nombre_1" class="acc-label required"> 
    Nombre:<span class="required">*</span><input id="acc_f_nombre_1" value="D" type="text" class="acc-text upp"> 
    </label> 
</div> 

<div class="facturacion" id="fac_0" style="display: none;"> 
    <label for="acc_f_nombre_0" class="acc-label required"> 
    Nombre:<span class="required">*</span><input id="acc_f_nombre_0" value="" type="text" class="acc-text upp"> 
    </label> 
</div> 

И CSS:

.menu-alias { 
    float: left; 
    width: 100%; 
    border-bottom: 1px solid; 
    display: flex; 
} 
.menu-alias .alias.aliselected { 
    background-color: rgba(255,100,0,0.3); 
    margin-bottom: -1px; 
} 
.menu-alias .alias{ 
    float: left; 
    border: 1px solid; 
    border-bottom: 0; 
    border-right: 0; 
    background-color: rgba(255,100,0,0.1); 
} 
.menu-alias .alias.ali-nuevo{ 
    border-right:1px solid; 
} 
.menu-alias .alias a{ 
    display: block; 
    padding: 5px 10px; 
    cursor: pointer; 
} 
.facturacion{ 
    padding: 5px; 
    background-color: rgba(255,100,0,0.3); 
    border-left: 1px solid; 
    border-right: 1px solid; 
    border-bottom: 1px solid; 
    float:left; 
} 

Здесь fiddle для лучшего понимания. Я не помещал код jquery, поэтому нажатие не работает, но, насколько мне кажется, это необходимо сделать.

Если вы измените прозрачность 0.3 на aliselected на 1, вы увидите, что она ставит себя над границей, что я хотел бы, но поддерживая прозрачность.

Answer 1

Вы всегда можете поставить "прозрачный" цвет как .menu-alias .alias.aliselected цвет фона.

.menu-alias .alias.aliselected { 
    background-color:#f7caad; 
    margin-bottom: -1px; 
} 

Fiddle здесь: https://jsfiddle.net/w0mp3r/Lpcrd6jx/1/

Answer 2

EDIT: этот ответ является противоположностью того, что ищет OP (моя ошибка), но я оставляю его здесь, так как он принес некоторые сведения о том, как рисовать фон (background-clip).

---

Вы можете поддельной эту границу с вставкой тени: http://jsfiddle.net/DytDA/32/

.menu-alias .alias.aliselected { 
    background-color: rgba(255,100,0,1); 
    box-shadow:inset 0 -1px black;/* unblured inset shadow showing at bottom */ 
    margin-bottom: -1px; 
} 

https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow

---

Или вы можете использовать фоновое клип, чтобы увидеть его через с прокладкой над областью, подлежащей получению: http://jsfiddle.net/DytDA/33/

.menu-alias .alias.aliselected { 
    background-color: rgba(255, 100, 0, 1); 
    padding-bottom: 1px;/* size of border underneath to see */ 
    background-clip: content-box;/* only paint the inside where content 
    stands except padding and borders area */ 
    margin-bottom: -1px; 
} 

https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip