CSS для создания изогнутого угла между двумя элементами?
-
25-09-2019 - |
Вопрос
Мой интерфейс имеет неупорядоченный список слева. Когда выбран элемент списка, div
появляется справа от этого. Я хотел бы иметь изогнутый внешний угол где <li>
и то <div>
встретить. Некоторые люди называют это Отрицательный радиус границы или ан перевернутый угол. Отказ Смотрите белую стрелку на изображении ниже.
Продлить синий <li>
к краю <ul>
, Я планирую сделать что-то вроде этого:
li {
right-margin: 2em;
border-radius: 8px;
}
li.active {
right-margin: 0;
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
Есть ли лучший способ расширить <li>
к краю <ul>
? Очевидно, что я также включаю CSS границы WebKit и Mozilla Radius.
Главное, что я не уверен в том, что внешний угол под правым нижним углом активного <li>
. Отказ У меня есть некоторые идеи, но они кажутся хаками. Какие-либо предложения?
Обратите внимание, что то <ul>
Указывается в серых, но это было бы белым в реальном дизайне. Кроме того, я планирую использовать JavaScript для позиции <div>
правильно, когда Ан <li>
выбран.
Решение
Ну, как оказывается, мне удалось решить проблему самому. Я взломал демонстрацию - Проверьте это.
По сути, требуется несколько дополнительных элементов DOM и значительное количество CSS. И как упомянуто в ссылке, предоставленной @steve, требуется твердый фон. Я не верю, что есть способ сделать это над градиентным фоном или другим рисунком.
Я закончил с HTML, как это:
ul.selectable {
padding-top: 1em;
padding-bottom: 1em;
width: 50%;
float: left;
}
ul.selectable li {
margin: 0 3em 0 4em;
border-radius: 8px;
-webkit-border-radius: 8px;
-khtml-border-radius: 8px;
-moz-border-radius: 8px;
}
ul.selectable li.active {
margin-right: 0;
}
ul.selectable li.active dl {
background-color: #4f9ddf;
}
ul.selectable li dt {
background-color: #dfd24f;
padding: 1em;
margin-left: -2em;
margin-right: -2em;
-webkit-border-radius: 8px;
-khtml-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
ul.selectable li dd {
padding: 0.25em;
background-color: #fff;
}
ul.selectable li.active dt {
background-color: #4f9ddf;
margin-right: 0;
-webkit-border-top-right-radius: 0;
-webkit-border-bottom-right-radius: 0;
-khtml-border-top-right-radius: 0;
-khtml-border-bottom-right-radius: 0;
-moz-border-radius-topright: 0;
-moz-border-radius-bottomright: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
ul.selectable li.active dd.top {
-webkit-border-bottom-right-radius: 8px;
-khtml-border-bottom-right-radius: 8px;
-moz-border-radius-bottomright: 8px;
border-bottom-right-radius: 8px;
}
ul.selectable li.active dd.bot {
-webkit-border-top-right-radius: 8px;
-khtml-border-top-right-radius: 8px;
-moz-border-radius-topright: 8px;
border-top-right-radius: 8px;
}
div.right {
float: left;
padding-top: 3em;
width: 50%;
}
div.content {
height: 15em;
width: 80%;
background-color: #4f9ddf;
padding: 1em;
-webkit-border-radius: 8px;
-khtml-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
<ul class="selectable">
<li>
<dl>
<dd class="top"></dd>
<dt>Title</dt>
<dd class="bot"></dd>
</dl>
</li>
<li class="active">
<dl>
<dd class="top"></dd>
<dt>Title</dt>
<dd class="bot"></dd>
</dl>
</li>
<li>
<dl>
<dd class="top"></dd>
<dt>Title</dt>
<dd class="bot"></dd>
</dl>
</li>
</ul>
<div class="right">
<div class="content">This is content</div>
</div>
Я не оптимизировал ни одного из CSS, так как я просто взломал его вместе. Но, возможно, это поможет кому-то еще. Я проверил это только в Google Chrome на Mac OSX.
Другие советы
Очистительное решение (меньше кода и Допустимый градиент фона)
Увидеть скрипку (или еще один), который использует этот HTML:
<ul class="selectable">
<li>Title</li>
<li class="active">Title</li>
<li>Title</li>
<li>Title</li>
</ul>
<div class="right">
<div class="content">This is content</div>
</div>
И этот CSS (ключ должен разрешить border-radius
а также border-width
на псевдоэлементы, чтобы сделать перевернутый круг для вас; Я опущел gradient
код.):
ul.selectable {
padding-top: 1em;
padding-bottom: 1em;
width: 50%;
float: left;
}
ul.selectable li {
margin: 1em 1em 1em 2em;
padding: 1em;
border-radius: 8px;
-webkit-border-radius: 8px;
-khtml-border-radius: 8px;
-moz-border-radius: 8px;
background-color: #dfd24f;
position: relative;
}
ul.selectable li.active {
margin-right: 0;
background-color: #4f9ddf;
-webkit-border-top-right-radius: 0;
-webkit-border-bottom-right-radius: 0;
-khtml-border-top-right-radius: 0;
-khtml-border-bottom-right-radius: 0;
-moz-border-radius-topright: 0;
-moz-border-radius-bottomright: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
ul.selectable li.active:before,
ul.selectable li.active:after {
content: '';
position: absolute;
left: 100%; /* I use this instead of right: 0 to avoid 1px rounding errors */
margin-left: -8px; /* I use this because I am using left: 100% */
width: 8px;
height: 8px;
border-right: 8px solid #4f9ddf;
z-index: -1;
}
ul.selectable li.active:before {
top: -8px;
border-bottom: 8px solid #4f9ddf;
-webkit-border-bottom-right-radius: 16px;
-khtml-border-bottom-right-radius: 16px;
-moz-border-radius-bottomright: 16px;
border-bottom-right-radius: 16px;
}
ul.selectable li.active:after {
bottom: -8px;
border-top: 8px solid #4f9ddf;
-webkit-border-top-right-radius: 16px;
-khtml-border-top-right-radius: 16px;
-moz-border-radius-topright: 16px;
border-top-right-radius: 16px;
}
div.right {
float: left;
padding-top: 3em;
width: 50%;
}
div.content {
height: 15em;
width: 80%;
background-color: #4f9ddf;
padding: 1em;
-webkit-border-radius: 8px;
-khtml-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
Я придумал решение, требующее меньше разметки. Таким образом, вместо использования Margis он использует белые округлые границы, то мы позиционируем активную Li позади белых закругленных границ для достижения инвертированного эффекта границирования.
<ul class="selectable">
<li>
<a href="#">Title</a>
</li>
<li class="active">
<a href="#">Title</a>
</li>
<li>
<a href="#">Title</a>
</li>
<li>
<a href="#">Title</a>
</li>
</ul>
<div class="right">
<div class="content">This is content</div>
</div>
И меньше CSS тоже! (Это согнутый разум):
a { color: #000; text-decoration: none;}
ul.selectable {
padding: 1em 1em;
width: 40%;
float: left;
}
ul.selectable li {
margin: -1em 0 0 0;
border-radius: 8px;
-webkit-border-radius: 8px;
-khtml-border-radius: 8px;
-moz-border-radius: 8px;
border: solid #fff 1em;
position: relative;
}
ul.selectable li a {
background-color: #dfd24f;
padding: 1em;
display: block;
border-radius: 8px;
-webkit-border-radius: 8px;
-khtml-border-radius: 8px;
-moz-border-radius: 8px;
}
ul.selectable li.active {
margin: -1em -1em -1em 1em;
border: solid #4f9ddf 1em;
border-left: solid #fff 1em;
background-color: #4f9ddf;
position: static;
}
ul.selectable li.active a {
margin: 0 0 0 -1em;
border-left: solid #4f9ddf 1em;
background-color: #4f9ddf;
position: static;
text-indent: -1em;
}
div.right {
float: left;
padding-top: 3em;
width: 50%;
margin-left: -1em;
}
div.content {
height: 15em;
width: 80%;
background-color: #4f9ddf;
padding: 1em;
-webkit-border-radius: 8px;
-khtml-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
Чтобы сказать вам правду, я не уверен, что это лучшая версия, она делает Gradient / Image Backgrounds легко (для не менее активных Li, по крайней мере), но вы не можете применить образование / градиентный фон в организм. Это также «плохое магия» в том смысле, что он работает не интуитивным образом.
Не на самом деле, извините, за
Чтобы сделать это через неплохие BG, я не думаю, что вы можете сделать это с CSS, но вы могли бы использовать холст или SVG к тому же эффекту - не именно то, что вы просили, хотя.
Тем не менее, там кажется Предложение о негативной границе RADIUS Это решило бы проблему. Может быть, какой-то день, верно.
Это хорошее Обратный радиус границы в учебном пособии CSS мог сделать трюк. Объясняет, как сделать обратный радиус границы для вкладок. Но его можно легко адаптировать для оптимизации ваших CSS, поскольку он использует :after
вместо того, чтобы создавать слишком много дополнительных элементов.