使用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吗?
答案 0 :(得分:10)
这是一种方式,虽然它确实有一些缺点,比如没有边框而且它不透明:
.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>
<强>结果:强>
答案 1 :(得分:9)
CSS3 Gradients 可以解决这个问题:
试试这个,这是一个Fiddle。
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>
答案 2 :(得分:4)
使用“clip-path”也可以。
-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>
可以在此处找到对剪辑路径的支持... http://caniuse.com/#search=clip-path
答案 3 :(得分:3)
这就是你所需要的,透明度和一切
.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>
答案 4 :(得分:2)
一个好的最好的方式来存档:border-images。结合.svg
一个很好的解决方案......
答案 5 :(得分:1)
我首先用position: 'absolute'
测试了@thordarson解决方案。
position: 'absolute',
top: '2.9rem',
left: '2.6rem',
borderLeft: '1rem solid #6CAEC6',
borderBottom: '0.7rem solid white',
这在大多数设备上都可以正常工作,如第一张图片所示,但是当在iPhone或平板电脑上使用时,奇怪的线条开始出现:
@Collins回答后,我开始使用clip-path: polygon
,但要获得正确的形状却很困难。然后,我找到了一个确实对我有帮助的网站:
https://bennettfeely.com/clippy/
它们提供了可以随时拖动到所需形状的现成形状。
然后,我可以从网站复制正确的值。
我们的要求是35度角,为正确起见,我使用了该网站:
https://www.ginifab.com/feeds/angle_measurement/
我与任何网站都没有任何隶属关系,它们确实确实在帮助我获得了我想要的东西。使用clip-path: polygon
和-webkit-clip-path: polygon
,它可以在我们需要的所有设备和浏览器上运行。
兼容性检查:
答案 6 :(得分:0)
++包含CSS ++中的Westworld Style UI
我已经更新了AlphaMale对原始请求的黑客倒角边框的精彩回答。它基本上使用一个倒角div,内部略小一些。外部div的背景颜色成为边框颜色,当其余部分被内部div覆盖并带有匹配的倒角时。
在Edge,Chrome和Firefox中测试过。
我找到了这个页面,同时希望复制像 Westworld用户界面这样的东西,它具有不相等的倒角。请参阅JS小提琴,了解我是如何拼凑出来的,以及来自Westworld演讲链场景的配色方案和示例框。
JSFiddle上的代码(下面的CSS):http://jsfiddle.net/S2nqK/345/
Westworld UI图片: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}
答案 7 :(得分:0)
好的,所以我做了一个JS library来自动创建倒角边框。 它有两种创建倒角的方法:
方法1:它使用Canvas API创建倒角背景,并将其设置为元素的CSS background-image
。
方法2:它会在目标周围附加4个基于CSS的三角形DOM元素,从而形成倒角。
如果您可以让图书馆设置background-image
,您将坚持使用方法1,当您的目标已经具有背景时,您将需要方法2,例如&lt; img&gt ;.
用法很简单,只需使用方法1调用ChamferBg
,或使用方法2调用ChamferEnvelop
:
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
}
如果使用方法1 ,则需要将resize_observe
设置为true,并且您的元素可能会在运行时更改其大小,因为每次它都需要重新创建倒角背景调整大小。