- = 2017 = -

Question

我希望元素的角落基本上被切掉。此元素具有纯色背景，而它的父元素具有图像作为背景。这个元素的高度是未知的。 CSS的border-radius属性对它没有帮助，因为它对它进行了舍入。我发现a jQuery plugin有帮助，但没有说明背景图片。

Answer 1

你想要的是：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}

Answer 2

不完全确定问题，但也许您指的是border-style？

border-style: outset产生斜边。

更多信息：http://www.w3schools.com/css/css_border.asp

Answer 3

- = 2017 = -

以下是适用于所有常绿浏览器的更新和升级版本。

https://codepen.io/aternus/pen/mqqXdK

它甚至允许您轻松指定自定义背景颜色/图像。只需添加另一个背景图层（作为最后一个）。

＆＃13;

/* 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;
}

＆＃13;

<div class="container">
  Lorem that ipsum, dolor that amet
</div>

＆＃13;

我如何斜切元素的角落？

3 个答案:

- = 2017 = -