Скошенная граница другого цвета контейнера CSS

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

введите здесь описание изображения

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

html css border css-shapes
person Laxmana    schedule 19.06.2014    source источник

Ответы (1)


arrow_upward
1
arrow_downward

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

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

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

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

ДЕМО

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

}
person G-Cyrillus    schedule 19.06.2014