Css границы наложения углов
Есть ли способ решить границу css, когда вы, например, используете разные размеры для левого и нижнего? как это:
Я знаю, что это под углом, но есть ли способ использовать для этого какие-то обрезки, маску или даже z-индекс?
мой css:
.activity-container{
border-bottom: 1px solid @color-border-light;
border-left: 5px solid @color-green;
position: relative;
}
Спасибо
Ответы 1
Свойство z-index не применяется к значениям border, и все стороны border простираются в элемент, к которому они применяются. Я бы посоветовал outline, если вам нужна граница, выходящая за пределы элемента, но outline не может быть применен к отдельным сторонам, поэтому он должен быть последовательным вокруг элемента.
С учетом всего вышесказанного вы можете использовать box-shadow, чтобы действовать как псевдо-граница с левой стороны вашего элемента, поскольку его можно применять таким образом, чтобы он выходил либо за пределы, либо внутрь элемента (по умолчанию снаружи):
.bordered {
box-sizing: border-box;
height: 100px;
width: 100px;
border: 1px solid red;
border-left: none;
box-shadow: -5px 0px 0px 0px green;
}<div class = "bordered"></div>Что я делаю, так это скрываю левую часть border и заменяю ее box-shadow, выходящей за пределы левой части элемента. Поскольку border простирается внутрь, а box-shadow выходит наружу, они скорее встречаются, чем перекрываются.
Не видя примеров кода, трудно сказать, что происходит, и невозможно помочь. Вопрос сейчас слишком широк, чтобы ответить