1

Как сделать, как бы "внешний" border-radius, как показано на картинке? (Обведено красными кругами). Только css.

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

3

2 ответа 2

6

Как-то так:

.bg div {
  display:inline-block;
  border-radius: 10px;
  background: black;
  width:50px;
  text-align: center;
  color:red
}

.bg div.select {
  background: white;
}

.bg{
  padding: 10px 0;
  width:150px;
  background: linear-gradient(to top, white 50%, black 50%)
}
<div class=bg>
<div>1</div><div class="select">2</div><div>3</div>
</div>

3
  • Ну здесь такой результат сделан благодаря белому фону, попробуйте сделать задний фон, например, зеленым, такого "внешнего бордера" уже не будет, к сожалению. Но спасибо за попытку помочь 7 июн 2020 в 22:17
  • @ГлебЧерных так надо сразу требования формировать :) дополню ответ уже завтра 7 июн 2020 в 22:18
  • окей, соряяяннн 7 июн 2020 в 22:23
2

Вот такой вариант на CSS с использованием псевдоэлементов и radial-gradient()

// Для демонстрации результата
$('.tabs').on('click', '.item', function(){
  $('.tabs').find('.item.-active').removeClass('-active');
  $(this).addClass('-active');
});
.tabs {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-end;
  width: 100%;
  background: red;
}

.item {
  --active-color: blue;
  --active-radius: 6px;
  /*  */
  display: block;
  width: auto;
  padding: 8px 10px;
  border-radius: var(--active-radius) var(--active-radius) 0 0;
  position: relative;
  cursor: pointer;
}

.item::before,
.item::after {
  content: '';
  display: none;
  width: var(--active-radius);
  height: var(--active-radius);
  background-size: calc(var(--active-radius) * 1.5) calc(var(--active-radius) * 1.5);
  position: absolute;
  bottom: 0;
}

.item::before {
  background-image: radial-gradient(circle at top left, transparent 44%, var(--active-color) 50%);
  left: calc(var(--active-radius) * -1);
}

.item::after {
  background-image: radial-gradient(circle at top right, transparent 44%, var(--active-color) 50%);
  background-position: 100% 0;
  right: calc(var(--active-radius) * -1);
}

.item:first-child {
  margin-left: var(--active-radius);
}

.item:not(:last-child) {
  margin-right: calc(var(--active-radius) * 2);
}

.item:last-child {
  margin-right: var(--active-radius);
}

.item.-active {
  background: var(--active-color);
  color: #fff;
  cursor: default;
}

.item.-active::before,
.item.-active::after {
  display: block;
}

.content {
  display: block;
  width: 100%;
  height: 100px;
  background: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="tabs">
  <div class="item">Item 1</div>
  <div class="item -active">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
  <div class="item">Item 6</div>
</div>
<div class="content"></div>


Вариант с плавной анимацией появление

// Для демонстрации результата
$('.tabs').on('click', '.item', function(){
  $('.tabs').find('.item.-active').removeClass('-active');
  $(this).addClass('-active');
});
.tabs {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-end;
  width: 100%;
  background: red;
}

.item {
  --active-color: blue;
  --active-radius: 6px;
  /*  */
  display: block;
  width: auto;
  padding: 8px 10px;
  border-radius: var(--active-radius) var(--active-radius) 0 0;
  position: relative;
  cursor: pointer;
}

.item::before,
.item::after {
  content: '';
  display: block;
  width: var(--active-radius);
  height: var(--active-radius);
  background-size: calc(var(--active-radius) * 1.5) calc(var(--active-radius) * 1.5);
  opacity: 0;
  position: absolute;
  bottom: 0;
}

.item::before {
  background-image: radial-gradient(circle at top left, transparent 44%, var(--active-color) 50%);
  left: calc(var(--active-radius) * -1);
}

.item::after {
  background-image: radial-gradient(circle at top right, transparent 44%, var(--active-color) 50%);
  background-position: 100% 0;
  right: calc(var(--active-radius) * -1);
}

.item:first-child {
  margin-left: var(--active-radius);
}

.item:not(:last-child) {
  margin-right: calc(var(--active-radius) * 2);
}

.item:last-child {
  margin-right: var(--active-radius);
}

.item.-active {
  background: var(--active-color);
  color: #fff;
  cursor: default;
}

.item.-active::before,
.item.-active::after {
  opacity: 1;
}

.item,
.item::before,
.item::after {
  transition: all .4s linear;
}

.content {
  display: block;
  width: 100%;
  height: 100px;
  background: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="tabs">
  <div class="item">Item 1</div>
  <div class="item -active">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
  <div class="item">Item 6</div>
</div>
<div class="content"></div>


Совет: для такой задачи, использовать SVG, ну или на крайняк изображение с прозрачным фоном.

2
  • спасибо, вроде всё норм 8 июн 2020 в 22:48
  • @ГлебЧерных, не за что, рад помочь
    – De.Minov
    9 июн 2020 в 4:54

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.