Как получить скошенные углы границ 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;
}

<div class="left"></div>
<div class="right"></div>

РЕЗУЛЬТАТ:

Вот скрипка.

Градиенты CSS3 могут помочь:

Попробуйте это, Вот Fiddle.

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's just to make the demo more presentable */

div {
  float: left;
  width: 50px;
  margin: 15px auto;
  padding: 15px;
  color: white;
  line-height: 1.5;
}

<div>Div 1</div>
<div>Div 2</div>

Это также возможно с использованием «clip-path».

-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%);

div {
  width: 200px;
  height: 200px;
  background: red;
  -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%);
}

<div></div>

Исходный код Codepen

Поддержку clip-path можно найти здесь... http://caniuse.com/#search=clip-path

Это то, что вам нужно, прозрачность и все такое

.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;
}

<div class="left"></div>
<div class="right"></div>

Хороший лучший способ заархивировать это: border-images. В сочетании с .svg хорошее решение...

Сначала я протестировал решение @thordarson с помощью position: 'absolute'.

position: 'absolute',
top: '2.9rem',
left: '2.6rem',
borderLeft: '1rem solid #6CAEC6',
borderBottom: '0.7rem solid white',

Это отлично работало на большинстве устройств, как показано на первом рисунке, но при использовании на iPhone или планшетах начали появляться странные линии:

Как ответил @Collins, я начал использовать clip-path: polygon, но мне было довольно трудно получить правильные формы. Затем я нашел сайт, который мне действительно помог:

https://bennettfeely.com/clippy/

Они предлагают готовые формы, которые затем можно перетащить в нужную форму.

Для угла, который мне нужен, я мог скопировать правильные значения с веб-сайта.

Требованием для нас был угол 35°, и для этого я воспользовался сайтом:

https://www.ginifab.com/feeds/angle_measurement/

Я не имею отношения ни к одному из сайтов, они просто действительно помогли мне получить то, что я хотел. С clip-path: polygon и -webkit-clip-path: polygon он работал на всех устройствах и браузерах, которые у нас были в качестве требования.

Проверка совместимости:

https://caniuse.com/#feat=css-clip-path

++ Включает пользовательский интерфейс в стиле Дикого Запада в 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's 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}

Итак, я создал 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, и ваш элемент может изменить свой размер во время выполнения, потому что тогда ему нужно будет воссоздавать скошенный фон каждый раз, когда он изменяет размер.