Вырезать углы с помощью CSS

Если родительский элемент имеет сплошной цвет фона, вы можете использовать псевдоэлементы для создания эффекта:

div {
    height: 300px;
    background: red;
    position: relative;
}

div:before {
    content: '';
    position: absolute;
    top: 0; right: 0;
    border-top: 80px solid white;
    border-left: 80px solid red;
    width: 0;
}

<div></div>

http://jsfiddle.net/2bZAW/

P.S. Грядущий border-corner-shape — это именно то, что вам нужно. Жаль, что его могут вырезать из спецификации и никогда не использовать ни в одном браузере :(

Если вам нужен прозрачный вырезанный край, вы можете использовать повернутый псевдоэлемент в качестве фона для div и расположить его так, чтобы он вырезал нужный угол:

body {
  background: url(http://i.imgur.com/k8BtMvj.jpg);
  background-size: cover;
}
div {
  position: relative;
  width: 50%;
  margin: 0 auto;
  overflow: hidden;
  padding: 20px;
  text-align: center;
}
div:after {
  content: '';
  position: absolute;
  width: 1100%; height: 1100%;
  top: 20px; right: -500%;
  background: rgba(255,255,255,.8);
  transform-origin: 54% 0;
  transform: rotate(45deg);
  z-index: -1;
}

<div>
  ... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>
</div>

Обратите внимание, что в этом решении используются преобразования, и вам необходимо добавить необходимые префиксы поставщиков. Дополнительную информацию см. в разделе можно использовать.

Чтобы обрезать нижний правый край, вы можете изменить свойства top, transform и transform-origin псевдоэлемента на:

body {
  background: url(http://i.imgur.com/k8BtMvj.jpg);
  background-size: cover;
}
div {
  position: relative;
  width: 50%;
  margin: 0 auto;
  overflow: hidden;
  padding: 20px;
  text-align: center;
}
div:after {
  content: '';
  position: absolute;
  width: 1100%; height: 1100%;
  bottom: 20px; right: -500%;
  background: rgba(255,255,255,.8);
  transform-origin: 54% 100%;
  transform: rotate(-45deg);
  z-index: -1;
}

<div>
  ... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>
</div>

CSS Clip-путь

Использование clip-path — это новая перспективная альтернатива. Он начинает получать поддержку все больше и больше и теперь становится хорошо документированным. Поскольку он использует SVG для создания формы, он сразу реагирует.

• Можно использовать
• Генератор клипов

div {
  width: 200px;
  min-height: 200px;
  -webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 25%, 75% 0);
  clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 25%, 75% 0);
  background: lightblue;
}

<div>
  <p>Some Text</p>
</div>

CSS-преобразование

У меня есть альтернатива ответу на преобразование веб-тики.

body {
  background: lightgreen;
}
div {
  width: 200px;
  height: 200px;
  background: transparent;
  position: relative;
  overflow: hidden;
}
div.bg {
  width: 200%;
  height: 200%;
  background: lightblue;
  position: absolute;
  top: 0;
  left: -75%;
  transform-origin: 50% 50%;
  transform: rotate(45deg);
  z-index: -1;
}

<div>
  <div class="bg"></div>
  <p>Some Text</p>
</div>

Вот еще один подход с использованием CSS transform: skew(45deg) для создания эффекта срезанного угла. Сама форма включает в себя три элемента (1 реальный и 2 псевдоэлемента) следующим образом:

• Элемент основного контейнера div имеет overflow: hidden и создает левую границу.
• Псевдоэлемент :before, который составляет 20% высоты родительского контейнера и к которому применено косое преобразование. Этот элемент создает границу сверху и обрезанную (наклонную) границу с правой стороны.
• Псевдоэлемент :after, который составляет 80% высоты родителя (в основном оставшаяся высота) и создает нижнюю границу, оставшуюся часть правой границы.

Полученный результат является адаптивным, создает прозрачный вырез в верхней части и поддерживает прозрачный фон.

div {
  position: relative;
  height: 100px;
  width: 200px;
  border-left: 2px solid beige;
  overflow: hidden;
}
div:after,
div:before {
  position: absolute;
  content: '';
  width: calc(100% - 2px);
  left: 0px;
  z-index: -1;
}
div:before {
  height: 20%;
  top: 0px;
  border: 2px solid beige;
  border-width: 2px 3px 0px 0px;
  transform: skew(45deg);
  transform-origin: right bottom;
}
div:after {
  height: calc(80% - 4px);
  bottom: 0px;
  border: 2px solid beige;
  border-width: 0px 2px 2px 0px;
}
.filled:before, .filled:after {
  background-color: beige;
}

/* Just for demo */

div {
  float: left;
  color: beige;
  padding: 10px;
  transition: all 1s;
  margin: 10px;
}
div:hover {
  height: 200px;
  width: 300px;
}
div.filled{
  color: black;
}
body{
 background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}

<div class="cut-corner">Some content</div>
<div class="cut-corner filled">Some content</div>

Ниже приведен еще один способ создания эффекта срезанного угла с использованием linear-gradient фоновых изображений. Используется комбинация 3 градиентных изображений (приведенных ниже):

• Один линейный градиент (под углом к ​​левому нижнему углу) для создания эффекта срезанного угла. Этот градиент имеет фиксированный размер 25 x 25 пикселей.
• Один линейный градиент для обеспечения сплошного цвета слева от треугольника, вызывающего эффект обрезки. Градиент используется даже несмотря на то, что он создает сплошной цвет, потому что мы можем контролировать размер и положение фона только при использовании изображений или градиентов. Этот градиент расположен на -25px по оси X (в основном это означает, что он будет заканчиваться перед местом, где присутствует разрез).
• Еще один градиент, похожий на приведенный выше, который снова создает сплошной цвет, но располагается на 25 пикселей ниже по оси Y (опять же, чтобы не вырезать область выреза).

Полученный результат является отзывчивым, обеспечивает прозрачную обрезку и не требует никаких дополнительных элементов (настоящих или псевдо). Недостатком является то, что этот подход будет работать только тогда, когда фон (заливка) имеет сплошной цвет, и очень сложно создать границы (но все же возможно, как видно из фрагмента).

.cut-corner {
  height: 100px;
  width: 200px;
  background-image: linear-gradient(to bottom left, transparent 50%, beige 50%), linear-gradient(beige, beige), linear-gradient(beige, beige);
  background-size: 25px 25px, 100% 100%, 100% 100%;
  background-position: 100% 0%, -25px 0%, 100% 25px;
  background-repeat: no-repeat;
}
.filled {
  background-image: linear-gradient(black, black), linear-gradient(black, black), linear-gradient(black, black), linear-gradient(black, black), linear-gradient(to bottom left, transparent calc(50% - 1px), black calc(50% - 1px), black calc(50% + 1px), beige calc(50% + 1px)), linear-gradient(beige, beige), linear-gradient(beige, beige);
  background-size: 2px 100%, 2px 100%, 100% 2px, 100% 2px, 25px 25px, 100% 100%, 100% 100%;
  background-position: 0% 0%, 100% 25px, -25px 0%, 0px 100%, 100% 0%, -25px 0%, 100% 25px;
}

/* Just for demo */

*{
  box-sizing: border-box;
  }
div {
  float: left;
  color: black;
  padding: 10px;
  transition: all 1s;
  margin: 10px;
}
div:hover {
  height: 200px;
  width: 300px;
}
body{
 background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}

<div class="cut-corner">Some content</div>
<div class="cut-corner filled">Some content</div>

Вы можете использовать linear-gradient. Предположим, что у родителя div было фоновое изображение, и вам нужно было div поместиться поверх него с серым фоном и загнутым левым углом. Вы можете сделать что-то вроде этого:

.parent-div { background: url('/image.jpg'); }
.child-div { 
   background: #333;
   background: linear-gradient(135deg, transparent 30px, #333 0);
}

Посмотреть на CodePen

Дальнейшее чтение:

• CSS-градиенты на CSS-трюках
• Скошенные углы и отрицательный радиус границы с Градиенты CSS3

Если вам нужна диагональная граница вместо диагонального угла, вы можете сложить 2 div с каждым псевдоэлементом:

ДЕМО

http://codepen.io/remcokalf/pen/BNxLMJ

.container {
  padding: 100px 200px;
  overflow: hidden;
}

div.diagonal {
  background: #da1d00;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  width: 300px;
  height: 300px;
  padding: 70px;
  position: relative;
  margin: 30px;
  float: left;
}

div.diagonal2 {
  background: #da1d00;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  width: 300px;
  height: 300px;
  padding: 70px;
  position: relative;
  margin: 30px;
  background: #da1d00 url(http://www.remcokalf.nl/background.jpg) left top;
  background-size: cover;
  float: left;
}

div.diagonal3 {
  background: #da1d00;
  color: #da1d00;
  font-family: Arial, Helvetica, sans-serif;
  width: 432px;
  height: 432px;
  padding: 4px;
  position: relative;
  margin: 30px;
  float: left;
}

div.inside {
  background: #fff;
  color: #da1d00;
  font-family: Arial, Helvetica, sans-serif;
  width: 292px;
  height: 292px;
  padding: 70px;
  position: relative;
}

div.diagonal:before,
div.diagonal2:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border-top: 80px solid #fff;
  border-right: 80px solid transparent;
  width: 0;
}

div.diagonal3:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border-top: 80px solid #da1d00;
  border-right: 80px solid transparent;
  width: 0;
  z-index: 1;
}

div.inside:before {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  border-top: 74px solid #fff;
  border-right: 74px solid transparent;
  width: 0;
  z-index: 2;
}

h2 {
  font-size: 30px;
  line-height: 1.3em;
  margin-bottom: 1em;
  position: relative;
  z-index: 1000;
}

p {
  font-size: 16px;
  line-height: 1.6em;
  margin-bottom: 1.8em;
}

#grey {
  width: 100%;
  height: 400px;
  background: #ccc;
  position: relative;
  margin-top: 100px;
}

#grey:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border-top: 80px solid #fff;
  border-right: 80px solid #ccc;
  width: 400px;
}

<div id="grey"></div>
<div class="container">
  <div class="diagonal">
    <h2>Header title</h2>
    <p>Yes a CSS diagonal corner is possible</p>
  </div>
  <div class="diagonal2">
    <h2>Header title</h2>
    <p>Yes a CSS diagonal corner with background image is possible</p>
  </div>
  <div class="diagonal3">
    <div class="inside">
      <h2>Header title</h2>
      <p>Yes a CSS diagonal border is even possible with an extra div</p>
    </div>
  </div>
</div>

Этот код позволяет срезать углы с каждой стороны прямоугольника:

div {
  display:block;
  height: 300px;
  width: 200px;
  background: url('http://lorempixel.com/180/290/') no-repeat;
  background-size:cover;

  -webkit-clip-path: polygon(10px 0%, calc(100% - 10px) 0%, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0% calc(100% - 10px), 0% 10px);
  clip-path: polygon(10px 0%, calc(100% - 10px) 0%, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0% calc(100% - 10px), 0% 10px);
}

http://jsfiddle.net/2bZAW/5552/

У нас была проблема с разными цветами фона для вырезанных элементов. И нам нужен был только верхний правый и нижний левый угол.

body {
 background-color: rgba(0,0,0,0.3)
 
}

.box {
 position: relative;
 display: block;
 background: blue;
 text-align: center;
 color: white;
 padding: 15px;
 margin: 50px;
}

.box:before,
.box:after {
 content: "";
 position: absolute;
 left: 0; 
 right: 0;
 bottom: 100%;
 border-bottom: 15px solid blue;
 border-left: 15px solid transparent;
 border-right: 15px solid transparent;
}

.box:before{
	border-left: 15px solid blue;
}

.box:after{
	border-right: 15px solid blue;
}

.box:after {
 bottom: auto;
 top: 100%;
 border-bottom: none;
 border-top: 15px solid blue;
}


/* Active box */
.box.active{
	background: white;
	color: black;
}



.active:before,
.active:after {
 border-bottom: 15px solid white;
}

.active:before{
	border-left: 15px solid white;
}

.active:after{
	border-right: 15px solid white;
}

.active:after {
 border-bottom: none;
 border-top: 15px solid white;
}

<div class="box">
 Some text goes here. Some text goes here. Some text goes here. Some text goes here.<br/>Some text goes here.<br/>Some text goes here.<br/>Some text goes here.<br/>Some text goes here.<br/>Some text goes here.<br/>
</div>
<div class="box">
 Some text goes here.
</div>
<div class="box active">
 Some text goes here.
 <span class="border-bottom"></span>
</div>
<div class="box">
 Some text goes here.
</div>

С небольшим редактированием кода Джозефа элементу не требуется сплошной фон:

div {
    height: 300px;
    background: url('http://images2.layoutsparks.com/1/190037/serene-nature-scenery-blue.jpg');
    position: relative;
}

div:before {
    content: '';
    position: absolute;
    top: 0; right: 0;
    border-top: 80px solid white;
    border-left: 80px solid rgba(0,0,0,0);
    width: 0;
}

http://jsfiddle.net/2bZAW/1921/

Такое использование 'rgba(0,0,0,0)' позволяет сделать внутренний 'угол' невидимым .

Вы также можете отредактировать четвертый параметр 'a', где 0 ‹ a ‹ 1, чтобы создать тень для большего эффекта «загнутого угла»:

http://jsfiddle.net/2bZAW/1922/ (с тенью)

ПРИМЕЧАНИЕ. Цветовые значения RGBA поддерживаются в IE9+, Firefox 3+, Chrome, Safari и Opera 10+.

Еще одна идея с использованием маски и переменных CSS для лучшего контроля над всей формой. Он отзывчивый, прозрачный и допускает любой фон:

.box {
  --all:0px;
  width:200px;
  height:150px;
  display:inline-block;
  margin:10px;
  background:red;
  -webkit-mask:
     linear-gradient(  45deg, transparent 0 var(--bottom-left,var(--all)) ,#fff 0) bottom left,
     linear-gradient( -45deg, transparent 0 var(--bottom-right,var(--all)),#fff 0) bottom right,
     linear-gradient( 135deg, transparent 0 var(--top-left,var(--all))    ,#fff 0) top left,
     linear-gradient(-135deg, transparent 0 var(--top-right,var(--all))   ,#fff 0) top right;
   -webkit-mask-size:50.5% 50.5%;
   -webkit-mask-repeat:no-repeat;
}


body {
  background:grey;
}

<div class="box" style="--top-left:20px"></div>
<div class="box" style="--top-right:20px;--bottom-right:50px;background:radial-gradient(red,yellow)"></div>
<div class="box" style="--all:30px;background:url(https://picsum.photos/id/104/200/200)"></div>
<div class="box" style="--all:30px;--bottom-right:0px;background:linear-gradient(red,blue)"></div>
<div class="box" style="--all:50%;width:150px;background:green"></div>
<div class="box" style="--all:12%;width:150px;background:repeating-linear-gradient(45deg,#000 0 10px,#fff 0 20px)"></div>

И ниже, если вы хотите рассмотреть границу:

.box {
  --all:0px;
  --b:pink;
  
  width:200px;
  height:150px;
  display:inline-block;
  margin:10px;
  border:5px solid var(--b);
  background:
     linear-gradient(  45deg, var(--b) 0 calc(var(--bottom-left,var(--all)) + 5px) ,transparent 0) bottom left /50% 50%,
     linear-gradient( -45deg, var(--b) 0 calc(var(--bottom-right,var(--all)) + 5px),transparent 0) bottom right/50% 50%,
     linear-gradient( 135deg, var(--b) 0 calc(var(--top-left,var(--all)) + 5px)    ,transparent 0) top left    /50% 50%,
     linear-gradient(-135deg, var(--b) 0 calc(var(--top-right,var(--all)) + 5px)   ,transparent 0) top right   /50% 50%,
     var(--img,red);
  background-origin:border-box;
  background-repeat:no-repeat;
  -webkit-mask:
     linear-gradient(  45deg, transparent 0 var(--bottom-left,var(--all)) ,#fff 0) bottom left,
     linear-gradient( -45deg, transparent 0 var(--bottom-right,var(--all)),#fff 0) bottom right,
     linear-gradient( 135deg, transparent 0 var(--top-left,var(--all))    ,#fff 0) top left,
     linear-gradient(-135deg, transparent 0 var(--top-right,var(--all))   ,#fff 0) top right;
   -webkit-mask-size:50.5% 50.5%;
   -webkit-mask-repeat:no-repeat;
}


body {
  background:grey;
}

<div class="box" style="--top-left:20px"></div>
<div class="box" style="--top-right:20px;--bottom-right:50px;--img:radial-gradient(red,yellow);--b:white;"></div>
<div class="box" style="--all:30px;--img:url(https://picsum.photos/id/104/200/200) center/cover;--b:orange;"></div>
<div class="box" style="--all:30px;--bottom-right:0px;--img:linear-gradient(red,blue)"></div>
<div class="box" style="--all:50%;width:150px;--img:green;--b:red;"></div>
<div class="box" style="--all:12%;width:150px;--img:repeating-linear-gradient(45deg,#000 0 10px,#fff 0 20px)"></div>

Давайте также добавим немного радиуса:

.box {
  --all:0px;
  --b:pink;
  
  width:200px;
  height:150px;
  display:inline-block;
  margin:10px;
  filter:url(#round);
}
.box::before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:var(--img,red);
  -webkit-mask:
     linear-gradient(  45deg, transparent 0 var(--bottom-left,var(--all)) ,#fff 0) bottom left,
     linear-gradient( -45deg, transparent 0 var(--bottom-right,var(--all)),#fff 0) bottom right,
     linear-gradient( 135deg, transparent 0 var(--top-left,var(--all))    ,#fff 0) top left,
     linear-gradient(-135deg, transparent 0 var(--top-right,var(--all))   ,#fff 0) top right;
   -webkit-mask-size:50.5% 50.5%;
   -webkit-mask-repeat:no-repeat;
}

body {
  background:grey;
}

<div class="box" style="--top-left:20px"></div>
<div class="box" style="--top-right:20px;--bottom-right:50px;--img:radial-gradient(red,yellow);--b:white;"></div>
<div class="box" style="--all:30px;--img:url(https://picsum.photos/id/104/200/200) center/cover;--b:orange;"></div>
<div class="box" style="--all:30px;--bottom-right:0px;--img:linear-gradient(red,blue)"></div>
<div class="box" style="--all:50%;width:150px;--img:green;--b:red;"></div>
<div class="box" style="--all:12%;width:150px;--img:repeating-linear-gradient(45deg,#000 0 10px,#fff 0 20px)"></div>

<svg style="visibility: hidden; position: absolute;" width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
        <filter id="round">
            <feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur" />    
            <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />
            <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
        </filter>
    </defs>
</svg>

Согласно линейно-градиентному решению Гарри (ответил 14 окт.

Но! Я нашел обходной путь. Нет, это не супероптимизация, но это сработало. Итак, вот мое решение. Поскольку Гарри не использует псевдоэлемент, мы можем добиться этого, создав его.

Установите положение относительно контейнера и создайте псевдоэлемент с теми же свойствами линейного градиента. Другими словами, просто клонируйте его. Затем установите прозрачный фон для контейнера и, скажем, черный фон для клона. Установите для него абсолютную позицию, z-индекс -1 и значение непрозрачности (т.е. 50%). Это сделает работу. Опять же, это обходной путь, и он не идеален, но работает отлично.

.cut-corner {
    position: relative;
    color: white;
    background-repeat: no-repeat;
    background-image: linear-gradient(white, white), linear-gradient(white, white), linear-gradient(white, white), linear-gradient(white, white), linear-gradient(to bottom left, transparent calc(50% - 1px), white calc(50% - 1px), white calc(50% + 1px), transparent calc(50% + 1px)), linear-gradient(transparent, transparent), linear-gradient(transparent, transparent);
    background-size: 2px 100%, 2px 100%, 100% 2px, 100% 2px, 25px 25px, 100% 100%, 100% 100%;
    background-position: 0% 0%, 100% 25px, -25px 0%, 0px 100%, 100% 0%, -25px 0%, 100% 25px;
}
.cut-corner:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    top: 0;
    z-index: -1;
    opacity: 0.5;
    background-repeat: no-repeat;
    background-image: linear-gradient(white, white), linear-gradient(white, white), linear-gradient(white, white), linear-gradient(white, white), linear-gradient(to bottom left, transparent calc(50% - 1px), white calc(50% - 1px), white calc(50% + 1px), black calc(50% + 1px)), linear-gradient(black, black), linear-gradient(black, black);
    background-size: 2px 100%, 2px 100%, 100% 2px, 100% 2px, 25px 25px, 100% 100%, 100% 100%;
    background-position: 0% 0%, 100% 25px, -25px 0%, 0px 100%, 100% 0%, -25px 0%, 100% 25px;
}

/* Just for demo */

div {
  padding: 10px;
}
body{
 background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}

<div class="cut-corner">
  Some content<br>
  Some content<br>
  Some content<br>
  Some content  
</div>

путем небольшой модификации кода Джошепа... Вы можете использовать этот код, который выглядит как правый угол, сложенный в соответствии с вашими требованиями.

div {
    height: 300px;
    background: red;
    position: relative;
}

div:before {
    content: '';
    position: absolute;
    top: 0; right: 0;
    border-top: 80px solid white;
    border-left: 80px solid blue;
    width: 0;
}

Недавно я отрезал верхний правый угол и наложил вкладки как папки. Полный код нуб, так что не обращайте внимания на дерьмовый код, но я сделал это, объединив квадрат, треугольник и прямоугольник... Это может быть или не быть новым подходом, но, надеюсь, кто-то найдет его полезным.

https://i.stack.imgur.com/qFMRz.png

Вот HTML:

<!DOCTYPE html>
<html lang ="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" type="text/css" href="style.css"> 
    </head>
    <body>
        <div class="folders">
            <div class="container">
                <div class="triangleOne">
                    <p class="folderNames">Home</p>
                </div>
                <div class="triangleOneCut">
                </div>
                <div class="triangleOneFill">
                </div>
            </div>

            <div class="container2">
                <div class="triangleOne blue">
                    <p class="folderNames">About</p>
                </div>
                <div class="triangleOneCut blueCut">
                </div>
                <div class="triangleOneFill blue">
                </div>
            </div>

            <div class="container3">
                <div class="triangleOne green">
                    <p class="folderNames">Contact</p>
                </div>
                <div class="triangleOneCut greenCut">
                </div>
                <div class="triangleOneFill green">
                </div>
            </div>
        </div>
    </body>
</html>

Вот CSS:

.triangleOne {
    height: 50px;
    width: 40px;
    background: red;
    border-radius: 5px 0px 0px 5px;
    position: absolute;
}

.triangleOneCut {
    content: '';
    position: absolute;
    top: 0; left: 40px;
    border-top: 10px solid transparent;
    border-left: 10px solid red;
    width: 0;
}

.triangleOneFill {
    content: '';
    position: absolute;
    top: 10px; left: 40px;
    width: 10px;
    height: 40px;
    background-color: red;
    border-radius: 0px 0px 5px 0px;
}

.container {
    position: relative;
    height: 50px;
    width: 50px;
    display: inline-block;
    z-index: 3;
}

.container2 {
    position: relative;
    height: 50px;
    width: 50px;
    display: inline-block;
    left: -10px;
    z-index: 2;
}

.container3 {
    position: relative;
    height: 50px;
    width: 50px;
    display: inline-block;
    left: -20px;
    z-index: 1;
}

.blue {
    background-color: blue;
}

.green {
    background-color: green;
}

.blueCut {
    border-left: 10px solid blue;
}

.greenCut {
    border-left: 10px solid green;
}

.folders {
    width: 160px;
    height: 50px;
    /* border: 10px solid white; */
    margin: auto;
    padding-left: 25px;
    margin-top: 100px;
}

.folderNames {
    text-align: right;
    padding-left: 2px;
    color: white;
    margin-top: 1.5px;
    font-family: monospace;
    font-size: 6.5px;
    border-bottom: double 1.5px white;
}

Еще одно решение: html:

<div class="background">
  <div class="container">Hello world!</div>
</div>

CSS:

.background {
  position: relative;
  width: 50px;
  height: 50px;
  border-right: 150px solid lightgreen;
  border-bottom: 150px solid lightgreen;
  border-radius: 10px;
}
.background::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border: 25px solid lightgreen;
  border-top-color: transparent;
  border-left-color: transparent;
}
.container {
  position: absolute;
  padding-left: 25px;
  padding-top: 25px;
  font-size: 38px;
  font-weight: bolder;
}

https://codepen.io/eggofevil/pen/KYaMjV

Вы можете использовать clip-path, как упоминали Стюартсайд и Святослав Олексив. Чтобы упростить задачу, я создал миксин sass:

@mixin cut-corners ($left-top, $right-top: 0px, $right-bottom: 0px, $left-bottom: 0px) {
  clip-path: polygon($left-top 0%, calc(100% - #{$right-top}) 0%, 100% $right-top, 100% calc(100% - #{$right-bottom}), calc(100% - #{$right-bottom}) 100%, $left-bottom 100%, 0% calc(100% - #{$left-bottom}), 0% $left-top);
}

.cut-corners {
  @include cut-corners(10px, 0, 25px, 50px);
}

Вот решение, если вам не нужен однотонный фон, то есть просто рамка с прямоугольными углами.

.container {
  width: 100px;
  height: 100px;
  background-color: white;
  border: 1px solid black;
  position: relative;
}

.border {
      position: absolute;
      width: 100%;
      height: 100%;
}
.border:before {
        content: '';
        position: absolute;
        border-top: 15px solid white;
        border-left: 15px solid white;
        width: 0;
      }
  
.border:after {
        content: '';
        position: absolute;
        width: 16px;
        height: 1px;
        background: black;
      }
 
.tl:before { top: -5px; left: -5px; transform: rotate(-45deg); }
.tl:after { top: 5px; left: -3px; transform: rotate(-45deg);}

.tr:before { top: -5px; right: -5px; transform: rotate(45deg); }
.tr:after { top: 5px; right: -3px; transform: rotate(45deg); }

.bl:before { bottom: -5px; left: -5px; transform: rotate(45deg); }
.bl:after { bottom: 5px; left: -3px; transform: rotate(45deg); }

.br:before { bottom: -5px; right: -5px; transform: rotate(-45deg); }
.br:after { bottom: 5px; right: -3px; transform: rotate(-45deg); }
    
    

<html>
  <body>
     <div class="container">
       <div class="border tl"></div>
       <div class="border tr"></div>
       <div class="border bl"></div>
       <div class="border br"></div>
     </div>
  </body>
</html>