倒角边框不同的容器颜色CSS [英] Chamfered border different container color CSS

问题描述

我想实现的目标：

我到目前为止所做的是将角落制作成与容器颜色相同，然后覆盖假方格旋转了45度的不需要的区域。

我不喜欢那么多的结果，特别是右下角，我不能再这样做了。方法来做到这一点。实现它的最好方法是什么？第一步： > http://jsfiddle.net/laxmana/wjaAs/

最后： http://jsfiddle.net/laxmana/j9NWC/

CSS：

  .chamfered-box {
 width：100％; 
职位：亲属; 
背景：白色; 
 border：1px solid＃149E4B; 
} 
 
 .chamfered-box :: before，.chamfered-box :: after {
 width：0px; 
 height：0px; 
背景：#fff; 
内容：''; 
位置：绝对; 
 bottom：0; 
} 
 
 .chamfered-box :: after {
 right：-1px; 
 bottom：-1px; 
 border-top：10px solid＃149E4B; 
 border-right：10px纯白色; 
 border-left：10px solid＃149E4B; 
 border-bottom：10px纯白色; 
} 
 
 .chamfered-box :: before {
 left：-1px; 
 top：-1px; 
 border-top：10px solid＃149E4B; 
 border-right：10px纯白色; 
 border-left：10px solid＃149E4B; 
 border-bottom：10px纯白色; 
} 
 
 .ch-top，.ch-bottom {position：absolute; z-index：5;} 
 
 .ch-top {
顶部：-16px;剩余
：-18px; 
 width：30px; 
 height：30px; 
背景：白色; 
 -webkit-transform：rotate（45deg）; 
} 
 
 .ch-bottom {
 bottom：5px; 
 right：6px; 
 width：28px; 
 height：28px; 
背景：白色; 
 -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>文字< / div> 
< / div> 
  

解决方案

您可以使用伪元素并在顶部旋转它们（以上）与您的方法有一点区别。

绘制一个嵌入阴影，而不是边界到您的容器。

绘制具有边框的白色背景（作为容器）的正方形。

旋转正方形并隐藏它们从容器溢出的部分。 b
$ b

DEMO

---

  .chamfered-box {
 margin：1em auto; 
 width：440px; 
 padding：5px; 
职位：亲属; 
 overflow：hidden; 
背景：白色; 
 box-shadow：inset 0 0 0 1px＃149E4B; 
 
} 
 
 .chamfered-box :: before，.chamfered-box :: after {
 width：20px; 
 height：20px; 
背景：#fff; 
内容：''; 
位置：绝对; 
 bottom：0; 
 border：1px solid＃149E4B; 
 transform：rotate（45deg）; 
} 
 
 .chamfered-box :: after {
 right：-11px; 
底部：-11px; 
 
} 
 
 .chamfered-box ::之前{
 left：-11px; 
 top：-11px; 
 
} 
  

What I want to achieve :

What I did so far is to make the corners as if it had the same color with the container and then cover the unneeded area with the "fake" square rotated by 45 deg.

I don't like that much the result, especially the bottom right corner and I can't thing another way to do it. What is the best way to achieve it ? Is it possible to be done with gradients ?

First Step : http://jsfiddle.net/laxmana/wjaAs/

Final : 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>

解决方案

You may use the pseudo element and rotate them on top(over) of the container with a little difference from your method.

Draw an inset shadow instead a border to your container.

Draw squares with a white background (as container) with borders.

Rotate the square and hide part of them overflowing from container.

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;

}

这篇关于倒角边框不同的容器颜色CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！