Как сделать, как бы "внешний" border-radius, как показано на картинке? (Обведено красными кругами). Только css.
-
они у соседних элементов– Stranger in the Q7 июн 2020 в 21:42
-
если представить, что там будет тоже бордер у других элеметов, то как сделать это белое скругление– Hlib Ilnytsky7 июн 2020 в 21:47
-
codepen.io/topicstarter/pen/eYJNaXq - вот так получилось - с javascript помогли– Monkey Mutant8 июн 2020 в 3:48
Добавить комментарий
|
2 ответа
Как-то так:
.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>
-
Ну здесь такой результат сделан благодаря белому фону, попробуйте сделать задний фон, например, зеленым, такого "внешнего бордера" уже не будет, к сожалению. Но спасибо за попытку помочь 7 июн 2020 в 22:17
-
@ГлебЧерных так надо сразу требования формировать :) дополню ответ уже завтра 7 июн 2020 в 22:18
-
Вот такой вариант на 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, ну или на крайняк изображение с прозрачным фоном.