css - 如何斜切元素的角？

Question

我希望元素的角基本上被切断。该元素具有纯色背景，而其父元素具有图像作为背景。该元素的高度未知。CSS 的border-radius 属性对我没有帮助，因为它会舍入它。我找到了一个有帮助的 jQuery 插件，但它不考虑背景图像。

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

-= 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>

Answer 3

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

border-style: outset产生斜边。

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