Скошенный бордюр разного цвета контейнера CSS

Question

Чего я хочу добиться:

До сих пор я делал углы, как будто они были одного цвета с контейнером, а затем покрывал ненужную область "поддельным" квадратом, повернутым на 45 градусов.

Мне не очень нравится результат, особенно в правом нижнем углу, и я не могу найти другой способ сделать это. Каков наилучший способ достичь этого? Можно ли сделать это с градиентами?

Первый шаг: http://jsfiddle.net/laxmana/wjaAs/

Финал: http://jsfiddle.net/laxmana/j9NWC/

CSS:

.chamfered-box{
    width: 100%;
    position: relative;
    background: white;
    border: 1px solid #149E4B;
}

.chamfered-box::before, .chamfered-box::after{
    width: 0px;
    height: 0px;
    background: #fff;
    content: '';
    position: absolute;
    bottom: 0;
}

.chamfered-box::after{
    right: -1px;
    bottom: -1px;
    border-top: 10px solid #149E4B;
    border-right: 10px solid white;
    border-left: 10px solid #149E4B;
    border-bottom: 10px solid white;
}

.chamfered-box::before{
    left: -1px;
    top: -1px;
    border-top: 10px solid #149E4B;
    border-right: 10px solid white;
    border-left: 10px solid #149E4B;
    border-bottom: 10px solid white;
}

.ch-top, .ch-bottom{position: absolute;z-index: 5;}

.ch-top{
    top: -16px;
    left: -18px;
    width: 30px;
    height: 30px;
    background: white;
    -webkit-transform: rotate(45deg);
}

.ch-bottom{
    bottom: 5px;
    right: 6px;
    width: 28px;
    height: 28px;
    background: white;
    -webkit-transform: rotate(45deg);
}

.ch-content{
    padding: 20px;
}

HTML:

    <div class="chamfered-box">
      <div class="ch-top"></div>
      <div class="ch-bottom"></div>
      <div class="ch-content">The text</div>
     </div>

Answer 1

Вы можете использовать псевдоэлемент и вращать их сверху (сверху) контейнера с небольшим отличием от вашего метода.

Нарисуйте врезку вместо границы вашего контейнера.

Нарисуйте квадраты с белым фоном (как контейнер) с границами.

Поверните квадрат и спрячьте часть их, переполненную из контейнера.

DEMO

---

.chamfered-box{
  margin:1em auto;
  width: 440px;
  padding:5px;
  position: relative;
  overflow:hidden;
  background: white;
  box-shadow: inset 0 0 0 1px #149E4B;

}

.chamfered-box::before, .chamfered-box::after{
  width: 20px;
  height: 20px;
  background: #fff;
  content: '';
  position: absolute;
  bottom: 0;
  border: 1px solid #149E4B;  
  transform:rotate(45deg);
}

.chamfered-box::after{
  right: -11px;
  bottom: -11px;

}

.chamfered-box::before{
  left: -11px;
  top: -11px;

}