Вопросы Теги

Как создать div с границей и радиусом только внизу, внутри другого div с границей и радиусом

Если вы хотите просто иметь событие, когда выбрана вкладка, это правильный путь: 

<TabControl>
    <TabItem Selector.Selected="OnTabSelected" />
    <TabItem Selector.Selected="OnTabSelected" />
    <TabItem Selector.Selected="OnTabSelected" />
    <!-- You can also catch the unselected event -->
    <TabItem Selector.Unselected="OnTabUnSelected" />
</TabControl>

И в вашем коде 

    private void OnTabSelected(object sender, RoutedEventArgs e)
    {
        var tab = sender as TabItem;
        if (tab != null)
        {
            // this tab is selected!
        }
    }
1
задан MrMaavin 17 January 2019 в 11:17
поделиться

3 ответа

Используйте position:relative для родителя и position:absolute для ребенка

Также добавьте к ребенку width:calc(100% - 2px); (-2px: 1px для границы справа + 1px для границы слева) [ 1112] 

border-1 {
    width:100px;
    height:100px;
    background-color:#ccc;
    margin:50px;
    border:1px solid black;
    display:flex;
    border-radius: 3px;
    position:relative;
}

border-2 {
  flex:1 1 auto;
  border:1px solid black;
  height: 30px;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  position:absolute;
  width:calc(100% - 2px);
}
<border-1>
  <border-2>
    
  </border-2>
</border-1>

0
ответ дан לבני מלכה 17 January 2019 в 11:17
поделиться

Здесь вы изменили Fiddle .

Вам просто нужно изменить border:1px solid black; на border-bottom:1px solid black;, чтобы граница находилась только снизу.

Результат выглядит следующим образом:

Result

Вот полный CSS границы 2: 

border-2 {
  flex:1 1 auto;
  border-bottom:1px solid black;
  height: 30px;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
}


border-1 {
  width: 100px;
  height: 100px;
  background-color: #ccc;
  margin: 50px;
  border: 1px solid black;
  display: flex;
  border-radius: 3px;
}

border-2 {
  flex: 1 1 auto;
  border-bottom: 1px solid black;
  height: 30px;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
}
<border-1>
  <border-2>

  </border-2>
</border-1>

0
ответ дан MrMaavin 17 January 2019 в 11:17
поделиться

Надеюсь, вы найдете это полезным! 

.outer{
width:300px;
border-radius:10px;
border:4px solid #000;
background-color:green;
height:200px;
}
.outer .inner{
max-width:100%;
border-radius:0px 0px 10px 10px;
border:4px solid #000;
background-color:red;
height:80px;
}
<div class="outer">
<div class="inner"></div>
</div>

0
ответ дан InterviewSortout 17 January 2019 в 11:17
поделиться