Блог

Главная - Вопросы по программированию - Чтобы удалить границу CSS с диагональными краями

Чтобы удалить границу CSS с диагональными краями

#css #twitter-bootstrap #bootstrap-4

#css #twitter-bootstrap #bootstrap-4

Вопрос:

Как вы можете видеть на прилагаемом скриншоте, я пытаюсь удалить диагональные края в границе. Как я могу это сделать?

ДЕМОНСТРАЦИЯ:https://jsfiddle.net/3cxn1pbs /

введите описание изображения здесь

HTML:

 <div class="container">
<div class="row mt-2">
<div class="col-3">
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
  <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
  <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
  <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">About</a>
  <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
</div>
</div>
<div class="col-9">
<div class="tab-content" id="v-pills-tabContent">
  <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">Yo</div>
  <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">...</div>
  <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">...</div>
  <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">...</div>
</div>
</div>
</div>
</div>

CSS

 .nav {
    border-radius: 4px;
    border: solid 1px #dddddd;
    background-color: #ffffff;
    height: 100%;
    min-height: calc(100vh - 200px);
}
.nav-pills .nav-link {
    border-radius: 0;
}
.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
  color: #333;
  background-color: #e6f8fd;
  border-right: 4px solid #00b0e6;
  border-radius: 0px;
  font-weight: 600;
}
.nav-link {
  border-bottom: 1px solid #ddd;
  border-radius: 0;
  color: #333;
}
.nav.flex-column a:first-child, .nav.flex-column a:first-child:hover {
  border-top-right-radius: 3px !important;
  border-top-left-radius: 3px !important;
}
.nav-link:hover {
  color: #333;
  background-color: #e6f8fd;
  border-radius: 0px !important;
  border-right: 4px solid #00b0e6;
}

Комментарии:

1. Единственным обходным путем, который я нашел, было придание border-bottom того же размера и того же цвета, чтобы исправить эту проблему. Работает ли это в вашем дизайне.? может быть, 2px для border-bottom и border-right

Ответ №1:

Проблема в том, что у вас есть как правая, так и нижняя границы, посмотрите, как ведет себя граница в следующем фрагменте.

 .container {
  height: 100px;
  width: 100px;
  background-color: transparent;
  border-top: 20px green solid;
  border-right: 20px orange solid;
  border-bottom: 20px silver solid;
  border-left: 20px red solid;
}  
 <div class="container">

</div>

Если вы не хотите диагонали, вам следует удалить диагональ на нижней границе, вместо этого вы можете использовать верхнюю границу для разделения вкладок.

 .nav .nav-link {
   border-bottom: 0px !important;
 }

 .nav .nav-link {
   border-top: 1px #dddddd solid;
 }

Для оставления пробелов между вкладками:

Вы также можете удалить как верхнюю, так и нижнюю границы, использовать margin top / bottom для вложенных элементов и добавить цвет фона в родительский контейнер.