我希望元素的角基本上被切断。该元素具有纯色背景,而其父元素具有图像作为背景。该元素的高度未知。CSS 的border-radius 属性对我没有帮助,因为它会舍入它。我找到了一个有帮助的 jQuery 插件,但它不考虑背景图像。
Tyler Crompton
问问题
13686 次
3 回答
6
你想要的是这个: http: //lea.verou.me/2011/03/beveled-corners-negative-border-radius-with-css3-gradients/
全部在 CSS 中。
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.round {
background:
-moz-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
-moz-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
-moz-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
-moz-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
background:
-o-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
-o-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
-o-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
-o-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
background:
-webkit-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
-webkit-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
-webkit-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
-webkit-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
}
div, div.round {
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 */
body {
background: #444 url('http://leaverou.me/ft2010/img/darker_wood.jpg') bottom;
font-family: sans-serif;
}
div {
width: 500px;
margin:15px auto;
padding:13px 15px;
color: white;
line-height:1.5;
}
p:first-of-type { margin-top: 0 }
p:last-of-type { margin-bottom: 0}
于 2012-04-27T14:25:08.393 回答
3
-= 2017 年 =-
这是适用于所有常青浏览器的更新和升级版本。
https://codepen.io/aternus/pen/mqqXdK
它甚至允许您轻松指定自定义背景颜色/图像。只需添加另一个背景层(作为最后一个)。
/* Demo Styling */
body {
background: #333333;
padding: 2rem;
}
/* CSS */
.container {
padding: 1rem 2rem;
color: #ffffff;
background-color: transparent;
background-image: linear-gradient(180deg, #ffdc00, #ffdc00)
,linear-gradient(225deg, #ffdc00, #ffdc00)
,linear-gradient(0deg, #ffdc00, #ffdc00)
,linear-gradient(90deg, #ffdc00, #ffdc00)
,linear-gradient(135deg, transparent 9px, #ffdc00 10px, #ffdc00 12px, transparent 12px)
;
background-position: top right
,top right
,bottom left
,bottom left
,top left
;
background-size: calc(100% - 15px) 2px
,2px 100%
,100% 2px
,2px calc(100% - 15px)
,15px 15px
;
background-repeat: no-repeat;
}
<div class="container">
Lorem that ipsum, dolor that amet
</div>
于 2017-11-18T19:51:19.260 回答
1
不完全确定这个问题,但也许你指的是border-style
?
border-style: outset
产生斜边。
于 2012-04-27T07:20:36.617 回答