Как сделать срезанные углы в CSS?

#css #border

Как реализовывается такие углы(левый верхний, правый нижний) на CSS?


    

Ответы

Ответ 1

Таких углов на CSS можно достичь с помощью свойств: border-{top,right,left,bottom}



div, body { margin: 0; padding: 0 }

div {
    height: 200px;
    background: green;
}

div:after {
    content: '';
  
    position: absolute;
    left: 0;
    top: 0;
    
    border-top: 30px solid white;
    border-right: 30px solid green;
}

div:before {
    content: '';
  
    position: absolute;
    right: 0;
    top: 170px;
    
    border-bottom: 30px solid white;
    border-left: 30px solid green;
}



Ответ 2

Код может не самый лучший, зато белую обводку можно сделать



.background {
  background: #3D5E6C;
  padding: 10px;
}

.wrapper {
  overflow: hidden;
  width: 400px;
}

.item {
  height: 50px;
  background: #3D5E6C;
  border: 1px solid #fff;
  position: relative;
}

.item:before {
  border-right: 1px solid #fff;
  width: 50px;
  height: 30px;
  content: '';
  position: absolute;
  transform: rotate(50deg);
  left: -31px;
  top: -25px;
  background: #3D5E6C;
}

.item:after {
  border-left: 1px solid #fff;
  width: 50px;
  height: 30px;
  content: '';
  position: absolute;
  transform: rotate(50deg);
  right: -31px;
  bottom: -25px;
  background: #3D5E6C;
}

  

    

  



Ответ 3

Нашел ответ на вопрос в этой статье.