Как добиться скошенных граней границы CSS, а не закругленных углов?
С свойством CSS border-radius у меня может быть прямоугольный прямоугольник в конце.
.boxLeft{
border-right: 1px dashed #333;
border-bottom: 1px dashed #333;
border-radius: 0 0 10px 0;
}
.boxRight{
border-left: 1px dashed #333;
border-bottom: 1px dashed #333;
border-radius: 0 0 0 10px;
}
Но мне нужен пограничный угол, как показано ниже. Если у меня есть две коробки (Желтый и Розовый), встречающиеся друг с другом, и я хочу, чтобы в нижней точке встречи (пунктирном углу) был суровый угол, что мне делать?
![enter image description here]()
Возможно ли использование CSS?
Ответы
Ответ 1
Вот путь, хотя у него есть некоторые недостатки, такие как без границ, и он не прозрачен:
HTML:
<div class="left"></div>
<div class="right"></div>
CSS
.left,
.right {
width: 100px;
height: 100px;
float: left;
position: relative;
}
.left {
background: lightpink;
}
.right {
background: lightblue;
}
.right::after,
.left::after {
width: 0px;
height: 0px;
background: #fff;
content: '';
position: absolute;
bottom: 0;
}
.right::after {
left: 0;
border-top: 10px solid lightblue;
border-right: 10px solid lightblue;
border-left: 10px solid white;
border-bottom: 10px solid white;
}
.left::after {
right: 0;
border-top: 10px solid lightpink;
border-right: 10px solid white;
border-left: 10px solid lightpink;
border-bottom: 10px solid white;
}
РЕЗУЛЬТАТ:
![enter image description here]()
Здесь скрипка.
Ответ 2
CSS3 Градиенты могут сделать трюк:
Попробуйте это, здесь Fiddle:
http://jsfiddle.net/S2nqK/3/
HTML:
<div>Div 1</div>
<div>Div 2</div>
CSS
div {
background: #c00; /* fallback */
background:
-moz-linear-gradient(45deg, transparent 10px, #c00 10px),
-moz-linear-gradient(135deg, transparent 10px, #c00 10px),
-moz-linear-gradient(225deg, transparent 10px, #c00 10px),
-moz-linear-gradient(315deg, transparent 10px, #c00 10px);
background:
-o-linear-gradient(45deg, transparent 10px, #c00 10px),
-o-linear-gradient(135deg, transparent 10px, #c00 10px),
-o-linear-gradient(225deg, transparent 10px, #c00 10px),
-o-linear-gradient(315deg, transparent 10px, #c00 10px);
background:
-webkit-linear-gradient(45deg, transparent 10px, #c00 10px),
-webkit-linear-gradient(135deg, transparent 10px, #c00 10px),
-webkit-linear-gradient(225deg, transparent 10px, #c00 10px),
-webkit-linear-gradient(315deg, transparent 10px, #c00 10px);
}
div {
background-position: bottom left, bottom right, top right, top left;
-moz-background-size: 50% 50%;
-webkit-background-size: 50% 50%;
background-size: 50% 50%;
background-repeat: no-repeat;
}
/* Ignore the CSS from this point, it just to make the demo more presentable */
div {
float:left;
width: 50px;
margin:15px auto;
padding:15px;
color: white;
line-height:1.5;
}
Ответ 3
Я получил один
<div class="left"></div>
<div class="right"></div>
и этот css
.left,
.right {
width: 100px;
height: 100px;
float: left;
position: relative;
overflow:hidden;
}
.right::after,
.left::after {
content: '';
width:200px;
height:200px;
position:absolute;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.right::after {
background: lightblue;
left:-40px;
top:-100px;
}
.left::after {
background: lightpink;
left:-60px;
top:-100px;
}
это то, что вам нужно, прозрачность и все.
Ответ 4
Это также возможно, используя "клип-путь".
-webkit-clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
Пример здесь... http://codepen.io/anon/pen/vGWoPv
Поддержка клипа-пути можно найти здесь... http://caniuse.com/#search=clip-path
Ответ 5
Хороший Лучший способ архивирования: border-images. В сочетании с .svg хорошим решением...
Ответ 6
++ Включает интерфейс стиля Westworld в CSS ++
Я обновил AlphaMale удивительный ответ, чтобы взломать скошенные грани, как первоначально запрашивалось. Он в основном использует один скошенный div с немного меньшим внутри него. Внешний цвет фона div становится цветом границы, когда остальная часть покрыта внутренним div с соответствующими фасками.
Протестировано в Edge, Chrome и Firefox.
Я нашел эту страницу, пытаясь дублировать что-то вроде пользовательского интерфейса Westworld, который имеет неравные скошенные углы. См. Скрипт JS для того, как я объединил это вместе вместе с цветовой схемой и примерным полем из сцены цепочки речей Westworld.
Код на JSFiddle (CSS ниже): http://jsfiddle.net/S2nqK/345/
Веб-интерфейс Westworld по адресу: https://qph.ec.quoracdn.net/main-qimg-44c9f03b2abfe9f3833763eece1b0cc4?convert_to_webp=true
body {background-color: #353535;
font-family: 'Open Sans';}
.div-outer {
/* Chrome / Safari */
background:
-webkit-linear-gradient(45deg, transparent 0px, #6ea1a1 0px), /* bottom left */
-webkit-linear-gradient(135deg, transparent 14px, #6ea1a1 14px), /* bottom right */
-webkit-linear-gradient(225deg, transparent 0px, #6ea1a1 0px), /* top right */
-webkit-linear-gradient(315deg, transparent 5px, #6ea1a1 5px); /* top left */
/* Firefox */
background:
-moz-linear-gradient(45deg, transparent 0px, #6ea1a1 0px), /* bottom left */
-moz-linear-gradient(135deg, transparent 14px, #6ea1a1 14px), /* bottom right */
-moz-linear-gradient(225deg, transparent 0px, #6ea1a1 0px), /* top right */
-moz-linear-gradient(315deg, transparent 5px, #6ea1a1 5px); /* top left */
/* Opera */
background:
-o-linear-gradient(45deg, transparent 0px, #6ea1a1 0px), /* bottom left */
-o-linear-gradient(135deg, transparent 14px, #6ea1a1 14px), /* bottom right */
-o-linear-gradient(225deg, transparent 0px, #6ea1a1 0px), /* top right */
-o-linear-gradient(315deg, transparent 5px, #6ea1a1 5px); /* top left */
padding: 2px;
color: #fff;
}
.div-inner {
background:
-webkit-linear-gradient(45deg, transparent 0px, #000 0px),
-webkit-linear-gradient(135deg, transparent 14px, #000 14px),
-webkit-linear-gradient(225deg, transparent 0px, #000 0px),
-webkit-linear-gradient(315deg, transparent 5px, #000 5px);
background:
-moz-linear-gradient(45deg, transparent 0px, #000 0px),
-moz-linear-gradient(135deg, transparent 14px, #000 14px),
-moz-linear-gradient(225deg, transparent 0px, #000 0px),
-moz-linear-gradient(315deg, transparent 5px, #000 5px);
background:
-o-linear-gradient(45deg, transparent 0px, #000 0px),
-o-linear-gradient(135deg, transparent 14px, #000 14px),
-o-linear-gradient(225deg, transparent 0px, #000 0px),
-o-linear-gradient(315deg, transparent 5px, #000 5px);
padding: 10px;
height: 92px;
text-align: center;
}
.div-outer, .div-inner {
background-position: bottom left, bottom right, top right, top left;
-moz-background-size: 50% 50%;
-webkit-background-size: 50% 50%;
background-size: 50% 50%;
background-repeat: no-repeat;
}
.contain {
width: 180px;
}
.title {background-color: #76ffff;
padding: 6px;
color: #000;
border-radius: 2px;
font-weight: bold;
text-align-last: justify;
text-align: justify;
}
.font-large {font-size: 34pt;}
.font-tiny {font-size: 10pt;}
.cyan {color: #76ffff;}
/* Ignore the CSS from this point, it just to make the demo more presentable */
.arrow-right {
width: 0;
height: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 8px solid #fff;
display: inline-block;
vertical-align: middle;
}
p:first-of-type { margin-top: 0 }
p:last-of-type { margin-bottom: 0}
Ответ 7
Итак, я создал JS-библиотеку для автоматизации создания скошенных границ.
Он имеет два способа создания фасок:
Метод 1: создает фон с фаской с использованием Canvas API и устанавливает его как CSS background-image элемента.
Метод 2: он добавляет 4 элемента DOM треугольника на основе CSS вокруг цели, делая фаску.
Вы будете придерживаться метода 1, если вы можете позволить библиотеке установить background-image, и вам понадобится метод 2, когда у вашей цели уже есть фон, например, в <img> .
Использование простое, просто вызовите ChamferBg для использования метода 1 или ChamferEnvelop для использования метода 2:
var el = document.getElementById('box');
ChamferBg(el, {
size: 20,
sw: 6,
sc: '#447aec',
fc: '#21ceff',
tl: false,
br: false,
resize_observe: true
});
Параметры и их значения по умолчанию:
{
size: 5, // chamfer size
sw: 1, // stroke width
sc: 'black', // stroke color,
fc: undefined, // fill color
fp: undefined, // URL of an image to use as fill pattern
tl: true, // chamfer top-left corner?
tr: true, // chamfer top-right corner?
bl: true, // chamfer bottom-left corner?
br: true, // chamfer bottom-right corner?
resize_observe: false
// turn on resize_observe observer?
// this will observer whenever the element
// resizes and will refresh the background
}
Вам нужно установить значение resize_observe в значение true, если вы используете метод 1, и ваш элемент может изменить свой размер во время выполнения, потому что тогда он должен будет воссоздать скошенный фон при каждом изменении размера.
