如何实现倒角CSS边框角落，而不是圆角？(How to achieve chamfered CSS

2019-07-19 14:49发布

站内文章 / 后端开发
111 0 0

随着CSS border-radius财产我可以在最后一个曲线玲珑，圆润边角。 

.boxLeft{
    border-right: 1px dashed #333;
    border-bottom: 1px dashed #333;
    border-radius: 0 0 10px 0;
}

.boxRight{
    border-left: 1px dashed #333;
    border-bottom: 1px dashed #333;
    border-radius: 0 0 0 10px;
}

但我想一个边角像下面的图片。 如果我有两个盒子（黄色和粉色）满足对方，我想在底部交汇点（点角落）恶劣的角落，我该怎么办？

这是可能使用CSS？

Answer 1:

这里有一个方法，虽然它也有一些不足之处，如没有边界，它不是透明的： 

 .left, .right { width: 100px; height: 100px; float: left; position: relative; } .left { background: lightpink; } .right { background: lightblue; } .right::after, .left::after { width: 0px; height: 0px; background: #fff; content: ''; position: absolute; bottom: 0; } .right::after { left: 0; border-top: 10px solid lightblue; border-right: 10px solid lightblue; border-left: 10px solid white; border-bottom: 10px solid white; } .left::after { right: 0; border-top: 10px solid lightpink; border-right: 10px solid white; border-left: 10px solid lightpink; border-bottom: 10px solid white; } 
 <div class="left"></div> <div class="right"></div>

结果：

这里有一个小提琴。



Answer 2:

CSS3渐变可以做的伎俩：

试试这个，这是一个小提琴 。 

 div { background: #c00; /* fallback */ background: -moz-linear-gradient(45deg, transparent 10px, #c00 10px), -moz-linear-gradient(135deg, transparent 10px, #c00 10px), -moz-linear-gradient(225deg, transparent 10px, #c00 10px), -moz-linear-gradient(315deg, transparent 10px, #c00 10px); background: -o-linear-gradient(45deg, transparent 10px, #c00 10px), -o-linear-gradient(135deg, transparent 10px, #c00 10px), -o-linear-gradient(225deg, transparent 10px, #c00 10px), -o-linear-gradient(315deg, transparent 10px, #c00 10px); background: -webkit-linear-gradient(45deg, transparent 10px, #c00 10px), -webkit-linear-gradient(135deg, transparent 10px, #c00 10px), -webkit-linear-gradient(225deg, transparent 10px, #c00 10px), -webkit-linear-gradient(315deg, transparent 10px, #c00 10px); } div { background-position: bottom left, bottom right, top right, top left; -moz-background-size: 50% 50%; -webkit-background-size: 50% 50%; background-size: 50% 50%; background-repeat: no-repeat; } /* Ignore the CSS from this point, it's just to make the demo more presentable */ div { float: left; width: 50px; margin: 15px auto; padding: 15px; color: white; line-height: 1.5; } 
 <div>Div 1</div> <div>Div 2</div>



Answer 3:

这也可以使用“夹路径”。 

-webkit-clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);


 div { width: 200px; height: 200px; background: red; -webkit-clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%); clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%); } 
 <div></div>

来源Codepen

剪辑路径支持可以在这里找到... http://caniuse.com/#search=clip-path



Answer 4:

这是你需要什么，透明度和一切

 .left, .right { width: 100px; height: 100px; float: left; position: relative; overflow: hidden; } .right::after, .left::after { content: ''; width: 200px; height: 200px; position: absolute; -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .right::after { background: lightblue; left: -40px; top: -100px; } .left::after { background: lightpink; left: -60px; top: -100px; } 
 <div class="left"></div> <div class="right"></div>



Answer 5:

一个好的存档最好的方法： 边界图像 。 在与组合.svg一个很好的解决方案...



Answer 6:

++包括西部世界风格的用户界面在CSS ++

我已经更新AlphaMale的真棒答案破解倒角边框作为最初请求。 基本上，它使用一个倒角DIV用在里面稍微小一些。 外div的背景颜色变为当它的其余部分被掩盖了内部的div匹配倒角边框颜色。

经测试，在边缘，Chrome和Firefox。

我找到了这个网页，同时希望复制像其中有不平等的倒角的西部世界的用户界面 。 见JS捣鼓我怎么拼凑此一并以及来自西部世界的语音链接场景中的配色方案，例如盒。

守则的jsfiddle（以下CSS）： http://jsfiddle.net/S2nqK/345/

西部世界UI PIC在： https://qph.ec.quoracdn.net/main-qimg-44c9f03b2abfe9f3833763eece1b0cc4?convert_to_webp=true 

body {background-color: #353535;
font-family: 'Open Sans';}
.div-outer {

 /* Chrome / Safari */
    background:
        -webkit-linear-gradient(45deg,  transparent 0px, #6ea1a1 0px), /* bottom left */
        -webkit-linear-gradient(135deg, transparent 14px, #6ea1a1 14px), /* bottom right */
        -webkit-linear-gradient(225deg, transparent 0px, #6ea1a1 0px), /* top right */
        -webkit-linear-gradient(315deg, transparent 5px, #6ea1a1 5px); /* top left */

    /* Firefox */
        background:
        -moz-linear-gradient(45deg,  transparent 0px, #6ea1a1 0px), /* bottom left */
        -moz-linear-gradient(135deg, transparent 14px, #6ea1a1 14px), /* bottom right */
        -moz-linear-gradient(225deg, transparent 0px, #6ea1a1 0px), /* top right */
        -moz-linear-gradient(315deg, transparent 5px, #6ea1a1 5px); /* top left */

     /* Opera */
        background:
        -o-linear-gradient(45deg,  transparent 0px, #6ea1a1 0px), /* bottom left */
        -o-linear-gradient(135deg, transparent 14px, #6ea1a1 14px), /* bottom right */
        -o-linear-gradient(225deg, transparent 0px, #6ea1a1 0px), /* top right */
        -o-linear-gradient(315deg, transparent 5px, #6ea1a1 5px); /* top left */


   padding: 2px;
   color: #fff;

}

.div-inner {


    background:
        -webkit-linear-gradient(45deg,  transparent 0px, #000 0px),
        -webkit-linear-gradient(135deg, transparent 14px, #000 14px),
        -webkit-linear-gradient(225deg, transparent 0px, #000 0px),
        -webkit-linear-gradient(315deg, transparent 5px, #000 5px);

         background:
        -moz-linear-gradient(45deg,  transparent 0px, #000 0px),
        -moz-linear-gradient(135deg, transparent 14px, #000 14px),
        -moz-linear-gradient(225deg, transparent 0px, #000 0px),
        -moz-linear-gradient(315deg, transparent 5px, #000 5px);

         background:
        -o-linear-gradient(45deg,  transparent 0px, #000 0px),
        -o-linear-gradient(135deg, transparent 14px, #000 14px),
       -o-linear-gradient(225deg, transparent 0px, #000 0px),
        -o-linear-gradient(315deg, transparent 5px, #000 5px);


   padding: 10px;

   height: 92px;
   text-align: center;
}


.div-outer, .div-inner {
    background-position: bottom left, bottom right, top right, top left;
    -moz-background-size: 50% 50%;
    -webkit-background-size: 50% 50%;
    background-size: 50% 50%;
    background-repeat: no-repeat;
}

.contain {
   width: 180px;
}
.title {background-color: #76ffff; 
  padding: 6px;
  color: #000;
  border-radius: 2px;
  font-weight: bold;
 text-align-last: justify;
 text-align: justify;
  }
.font-large {font-size: 34pt;}
.font-tiny {font-size: 10pt;}
.cyan {color: #76ffff;}
/* Ignore the CSS from this point, it's just to make the demo more presentable */

.arrow-right {
  width: 0; 
  height: 0; 
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 8px solid #fff;
  display: inline-block;
  vertical-align: middle;
}


p:first-of-type { margin-top: 0 }
p:last-of-type { margin-bottom: 0}


Answer 7:

好了，我做了一个JS库自动创建倒角的边界。 它创建的倒角两种方法：

方法1：它创建使用Canvas API，并将其设置为CSS 倒角背景background-image的元素的。

方法2：其附加在目标周围4个基于CSS三角形DOM元素，使得倒角。

你会用方法1时坚持，你可以让磁带库设置的background-image ，你将需要方法2，当你的目标的<img>的已经有一个背景，等等。

的使用简单，只需要调用ChamferBg使用方法1，或ChamferEnvelop使用方法2： 

var el = document.getElementById('box');
ChamferBg(el, {
    size: 20,
    sw: 6,
    sc: '#447aec',
    fc: '#21ceff',
    tl: false,
    br: false,
    resize_observe: true
});

该选项及其默认值为： 

{
    size: 5,    // chamfer size
    sw: 1,      // stroke width
    sc: 'black',    // stroke color,
    fc: undefined,  // fill color
    fp: undefined,  // URL of an image to use as fill pattern

    tl: true,   // chamfer top-left corner?
    tr: true,   // chamfer top-right corner?
    bl: true,   // chamfer bottom-left corner?
    br: true,   // chamfer bottom-right corner?

    resize_observe: false
    // turn on resize_observe observer?
    // this will observer whenever the element
    // resizes and will refresh the background
}

您将需要设置resize_observe如果您使用方法1，你的元素可以在运行时改变它的大小为真，因为那将需要每次重新调整时间来重新创建倒角背景。



文章来源: How to achieve chamfered CSS Border Corners rather than rounded corners?
标签： css border css3 css-shapes
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~