使用 CSS 裁剪角落

我正在寻找“剪切”一个 div 的左上角，就像你已经折叠了一页下来的角落。

我想做的纯 CSS，有什么方法吗？

251034 次浏览
小开
最佳答案

如果父元素具有纯色背景，可以使用伪元素来创建效果:

div {
height: 300px;
background: red;
position: relative;
}


div:before {
content: '';
position: absolute;
top: 0; right: 0;
border-top: 80px solid white;
border-left: 80px solid red;
width: 0;
}
<div></div>

http://jsfiddle.net/2bZAW/

P.S. The upcoming border-corner-shape is exactly what you're looking for. Too bad it might get cut out of the spec, and never make it into any browsers in the wild :(

小开

对 Joseph 的代码进行一个小小的编辑，元素就不需要固定的背景:

div {
height: 300px;
background: url('http://images2.layoutsparks.com/1/190037/serene-nature-scenery-blue.jpg');
position: relative;
}


div:before {
content: '';
position: absolute;
top: 0; right: 0;
border-top: 80px solid white;
border-left: 80px solid rgba(0,0,0,0);
width: 0;
}

Http://jsfiddle.net/2bzaw/1921/

这种使用“ Rgba (0,0,0,0)”允许内部“角”是不可见的 .

你也可以编辑第四个参数‘ a’，其中的 0 < a < 1有一个更多的‘折角’效果的阴影:

Http://jsfiddle.net/2bzaw/1922/(有阴影)

注意: IE9 + 、 Firefox 3 + 、 Chrome、 Safari 和 Opera 10 + 都支持 RGBA 颜色值。

小开

通过小修改约什普的代码... 你可以使用这个代码，看起来像右角折叠起来，根据您的要求。

div {
height: 300px;
background: red;
position: relative;
}


div:before {
content: '';
position: absolute;
top: 0; right: 0;
border-top: 80px solid white;
border-left: 80px solid blue;
width: 0;
}
小开

你可以用 linear-gradient。假设家长 div有一个背景图像，你需要一个 div坐在上面，背景是灰色的，左边角落有一个折角。你可以这样做:

.parent-div { background: url('/image.jpg'); }
.child-div {
background: #333;
background: linear-gradient(135deg, transparent 30px, #333 0);
}

在 CodePen 上看到的

进一步阅读:

小开

如果你需要一个 透明切削刃透明切削刃，你可以使用一个旋转的伪元素作为 div的背景，并定位它来切出你想要的角:

Transprent cut out edge on a div

body {
background: url(http://i.imgur.com/k8BtMvj.jpg);
background-size: cover;
}
div {
position: relative;
width: 50%;
margin: 0 auto;
overflow: hidden;
padding: 20px;
text-align: center;
}
div:after {
content: '';
position: absolute;
width: 1100%; height: 1100%;
top: 20px; right: -500%;
background: rgba(255,255,255,.8);
transform-origin: 54% 0;
transform: rotate(45deg);
z-index: -1;
}
<div>
... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>
</div>

注意，这个解决方案使用转换，您需要添加所需的供应商前缀。

对于 剪下右下角的边缘，您可以将伪元素的 top 属性、转换属性和转换源属性更改为:

body {
background: url(http://i.imgur.com/k8BtMvj.jpg);
background-size: cover;
}
div {
position: relative;
width: 50%;
margin: 0 auto;
overflow: hidden;
padding: 20px;
text-align: center;
}
div:after {
content: '';
position: absolute;
width: 1100%; height: 1100%;
bottom: 20px; right: -500%;
background: rgba(255,255,255,.8);
transform-origin: 54% 100%;
transform: rotate(-45deg);
z-index: -1;
}
<div>
... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>
</div>

小开

如果你需要一个对角线边界而不是一个对角线角落，你可以堆叠2个 div 与每个伪元素:

演示

Http://codepen.io/remcokalf/pen/bnxlmj

.container {
padding: 100px 200px;
overflow: hidden;
}


div.diagonal {
background: #da1d00;
color: #fff;
font-family: Arial, Helvetica, sans-serif;
width: 300px;
height: 300px;
padding: 70px;
position: relative;
margin: 30px;
float: left;
}


div.diagonal2 {
background: #da1d00;
color: #fff;
font-family: Arial, Helvetica, sans-serif;
width: 300px;
height: 300px;
padding: 70px;
position: relative;
margin: 30px;
background: #da1d00 url(http://www.remcokalf.nl/background.jpg) left top;
background-size: cover;
float: left;
}


div.diagonal3 {
background: #da1d00;
color: #da1d00;
font-family: Arial, Helvetica, sans-serif;
width: 432px;
height: 432px;
padding: 4px;
position: relative;
margin: 30px;
float: left;
}


div.inside {
background: #fff;
color: #da1d00;
font-family: Arial, Helvetica, sans-serif;
width: 292px;
height: 292px;
padding: 70px;
position: relative;
}


div.diagonal:before,
div.diagonal2:before {
content: '';
position: absolute;
top: 0;
left: 0;
border-top: 80px solid #fff;
border-right: 80px solid transparent;
width: 0;
}


div.diagonal3:before {
content: '';
position: absolute;
top: 0;
left: 0;
border-top: 80px solid #da1d00;
border-right: 80px solid transparent;
width: 0;
z-index: 1;
}


div.inside:before {
content: '';
position: absolute;
top: -4px;
left: -4px;
border-top: 74px solid #fff;
border-right: 74px solid transparent;
width: 0;
z-index: 2;
}


h2 {
font-size: 30px;
line-height: 1.3em;
margin-bottom: 1em;
position: relative;
z-index: 1000;
}


p {
font-size: 16px;
line-height: 1.6em;
margin-bottom: 1.8em;
}


#grey {
width: 100%;
height: 400px;
background: #ccc;
position: relative;
margin-top: 100px;
}


#grey:before {
content: '';
position: absolute;
top: 0;
left: 0;
border-top: 80px solid #fff;
border-right: 80px solid #ccc;
width: 400px;
}
<div id="grey"></div>
<div class="container">
<div class="diagonal">
<h2>Header title</h2>
<p>Yes a CSS diagonal corner is possible</p>
</div>
<div class="diagonal2">
<h2>Header title</h2>
<p>Yes a CSS diagonal corner with background image is possible</p>
</div>
<div class="diagonal3">
<div class="inside">
<h2>Header title</h2>
<p>Yes a CSS diagonal border is even possible with an extra div</p>
</div>
</div>
</div>

小开

CSS 剪辑路径

使用 剪切路径是一种新的、正在出现的替代方法。它开始得到越来越多的支持，现在正在成为良好的文档。因为它使用 SVG 来创建形状，所以它可以直接响应。

div {
width: 200px;
min-height: 200px;
-webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 25%, 75% 0);
clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 25%, 75% 0);
background: lightblue;
}
<div>
<p>Some Text</p>
</div>

CSS 变换

我有一个替代 web-tiki 的转换答案。

body {
background: lightgreen;
}
div {
width: 200px;
height: 200px;
background: transparent;
position: relative;
overflow: hidden;
}
div.bg {
width: 200%;
height: 200%;
background: lightblue;
position: absolute;
top: 0;
left: -75%;
transform-origin: 50% 50%;
transform: rotate(45deg);
z-index: -1;
}
<div>
<div class="bg"></div>
<p>Some Text</p>
</div>

小开

下面是另一种使用 CSS transform: skew(45deg)产生切角效果的方法。形状本身包含如下三个元素(1个实元素和2个伪元素) :

  • 主容器 div元素具有 overflow: hidden并生成左边框。
  • :before伪元素，它是父容器高度的20% ，并对其应用了一个倾斜变换。这个元素在顶部产生边框，在右边裁剪(倾斜)边框。
  • :after伪元素，它是父元素高度(基本上是剩余高度)的80% ，并生成底部边框，即右边框的剩余部分。

输出产生的响应，产生一个透明的削减在顶部，并支持透明的背景。

div {
position: relative;
height: 100px;
width: 200px;
border-left: 2px solid beige;
overflow: hidden;
}
div:after,
div:before {
position: absolute;
content: '';
width: calc(100% - 2px);
left: 0px;
z-index: -1;
}
div:before {
height: 20%;
top: 0px;
border: 2px solid beige;
border-width: 2px 3px 0px 0px;
transform: skew(45deg);
transform-origin: right bottom;
}
div:after {
height: calc(80% - 4px);
bottom: 0px;
border: 2px solid beige;
border-width: 0px 2px 2px 0px;
}
.filled:before, .filled:after {
background-color: beige;
}


/* Just for demo */


div {
float: left;
color: beige;
padding: 10px;
transition: all 1s;
margin: 10px;
}
div:hover {
height: 200px;
width: 300px;
}
div.filled{
color: black;
}
body{
background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}
<div class="cut-corner">Some content</div>
<div class="cut-corner filled">Some content</div>

enter image description here

下面是另一种利用 linear-gradient背景图像产生切角效果的方法。使用了3个渐变图像的组合(如下图所示) :

  • 一个线性渐变(向左下角倾斜)产生切角效果。这个渐变有一个固定的25px x 25px 大小。
  • 一个线性渐变，为三角形的左侧提供一个纯色，从而产生切割效果。渐变是使用，即使它产生一个纯色，因为我们可以控制大小，位置的背景只有当图像或渐变使用。这个渐变定位在 X 轴的 -25像素(基本上意味着它会在切割出现的地方之前结束)。
  • 另一个渐变类似于上面再次产生一个纯色，但定位在25像素下的 Y 轴(再次省略了切割区域)。

产生的输出是响应性的，产生透明的削减，不需要任何额外的元素(真或伪)。缺点是这种方法只有在背景(填充)是纯色并且很难产生边框时才能工作(但是仍然可以在代码片段中看到)。

.cut-corner {
height: 100px;
width: 200px;
background-image: linear-gradient(to bottom left, transparent 50%, beige 50%), linear-gradient(beige, beige), linear-gradient(beige, beige);
background-size: 25px 25px, 100% 100%, 100% 100%;
background-position: 100% 0%, -25px 0%, 100% 25px;
background-repeat: no-repeat;
}
.filled {
background-image: linear-gradient(black, black), linear-gradient(black, black), linear-gradient(black, black), linear-gradient(black, black), linear-gradient(to bottom left, transparent calc(50% - 1px), black calc(50% - 1px), black calc(50% + 1px), beige calc(50% + 1px)), linear-gradient(beige, beige), linear-gradient(beige, beige);
background-size: 2px 100%, 2px 100%, 100% 2px, 100% 2px, 25px 25px, 100% 100%, 100% 100%;
background-position: 0% 0%, 100% 25px, -25px 0%, 0px 100%, 100% 0%, -25px 0%, 100% 25px;
}


/* Just for demo */


*{
box-sizing: border-box;
}
div {
float: left;
color: black;
padding: 10px;
transition: all 1s;
margin: 10px;
}
div:hover {
height: 200px;
width: 300px;
}
body{
background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}
<div class="cut-corner">Some content</div>
<div class="cut-corner filled">Some content</div>

enter image description here

小开

这个代码允许你在矩形的每一边都进行缩减:

div {
display:block;
height: 300px;
width: 200px;
background: url('http://lorempixel.com/180/290/') no-repeat;
background-size:cover;


-webkit-clip-path: polygon(10px 0%, calc(100% - 10px) 0%, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0% calc(100% - 10px), 0% 10px);
clip-path: polygon(10px 0%, calc(100% - 10px) 0%, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0% calc(100% - 10px), 0% 10px);
}

Http://jsfiddle.net/2bzaw/5552/

enter image description here

小开

根据哈里的线性梯度解答(10月14日15日9:55回答) ，它说不透明背景是不可能的，我试过了，是的，不可能。

但是！我找到了一个解决办法。不，这不是超级优化，但它工作。所以我的解决办法是。由于 Harry 不使用伪元素，我们可以通过创建一个来实现这一点。

设置相对于容器的位置，并创建一个具有相同线性梯度属性的伪元素。换句话说，就是克隆它。然后为容器放置一个透明的背景，让我们为克隆放置一个黑色的背景。在它上面放置一个绝对位置、一个 -1的 z 索引和一个不透明度值(即。50%).它会起作用的。同样，这是一个变通方案，它不是完美的，但它工作得很好。

.cut-corner {
position: relative;
color: white;
background-repeat: no-repeat;
background-image: linear-gradient(white, white), linear-gradient(white, white), linear-gradient(white, white), linear-gradient(white, white), linear-gradient(to bottom left, transparent calc(50% - 1px), white calc(50% - 1px), white calc(50% + 1px), transparent calc(50% + 1px)), linear-gradient(transparent, transparent), linear-gradient(transparent, transparent);
background-size: 2px 100%, 2px 100%, 100% 2px, 100% 2px, 25px 25px, 100% 100%, 100% 100%;
background-position: 0% 0%, 100% 25px, -25px 0%, 0px 100%, 100% 0%, -25px 0%, 100% 25px;
}
.cut-corner:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
right: 0;
top: 0;
z-index: -1;
opacity: 0.5;
background-repeat: no-repeat;
background-image: linear-gradient(white, white), linear-gradient(white, white), linear-gradient(white, white), linear-gradient(white, white), linear-gradient(to bottom left, transparent calc(50% - 1px), white calc(50% - 1px), white calc(50% + 1px), black calc(50% + 1px)), linear-gradient(black, black), linear-gradient(black, black);
background-size: 2px 100%, 2px 100%, 100% 2px, 100% 2px, 25px 25px, 100% 100%, 100% 100%;
background-position: 0% 0%, 100% 25px, -25px 0%, 0px 100%, 100% 0%, -25px 0%, 100% 25px;
}


/* Just for demo */


div {
padding: 10px;
}
body{
background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}
<div class="cut-corner">
Some content<br>
Some content<br>
Some content<br>
Some content
</div>

小开

我最近把右上角剪掉，把标签像文件夹一样叠起来。完全的代码菜鸟，所以忽略这些垃圾代码，但是我通过组合一个正方形，一个三角形和一个矩形来做到这一点... 这可能是一种新的方法，也可能不是，但是希望有人会发现它有帮助。

Https://i.stack.imgur.com/qfmrz.png

下面是 HTML:

<!DOCTYPE html>
<html lang ="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="folders">
<div class="container">
<div class="triangleOne">
<p class="folderNames">Home</p>
</div>
<div class="triangleOneCut">
</div>
<div class="triangleOneFill">
</div>
</div>


<div class="container2">
<div class="triangleOne blue">
<p class="folderNames">About</p>
</div>
<div class="triangleOneCut blueCut">
</div>
<div class="triangleOneFill blue">
</div>
</div>


<div class="container3">
<div class="triangleOne green">
<p class="folderNames">Contact</p>
</div>
<div class="triangleOneCut greenCut">
</div>
<div class="triangleOneFill green">
</div>
</div>
</div>
</body>
</html>

这是 CSS:

.triangleOne {
height: 50px;
width: 40px;
background: red;
border-radius: 5px 0px 0px 5px;
position: absolute;
}


.triangleOneCut {
content: '';
position: absolute;
top: 0; left: 40px;
border-top: 10px solid transparent;
border-left: 10px solid red;
width: 0;
}


.triangleOneFill {
content: '';
position: absolute;
top: 10px; left: 40px;
width: 10px;
height: 40px;
background-color: red;
border-radius: 0px 0px 5px 0px;
}


.container {
position: relative;
height: 50px;
width: 50px;
display: inline-block;
z-index: 3;
}


.container2 {
position: relative;
height: 50px;
width: 50px;
display: inline-block;
left: -10px;
z-index: 2;
}


.container3 {
position: relative;
height: 50px;
width: 50px;
display: inline-block;
left: -20px;
z-index: 1;
}


.blue {
background-color: blue;
}


.green {
background-color: green;
}


.blueCut {
border-left: 10px solid blue;
}


.greenCut {
border-left: 10px solid green;
}


.folders {
width: 160px;
height: 50px;
/* border: 10px solid white; */
margin: auto;
padding-left: 25px;
margin-top: 100px;
}


.folderNames {
text-align: right;
padding-left: 2px;
color: white;
margin-top: 1.5px;
font-family: monospace;
font-size: 6.5px;
border-bottom: double 1.5px white;
}
小开

我们有不同的背景颜色的问题，为我们的削减元素。我们只要右上角和左下角。

enter image description here

body {
background-color: rgba(0,0,0,0.3)
 

}


.box {
position: relative;
display: block;
background: blue;
text-align: center;
color: white;
padding: 15px;
margin: 50px;
}


.box:before,
.box:after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 100%;
border-bottom: 15px solid blue;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
}


.box:before{
border-left: 15px solid blue;
}


.box:after{
border-right: 15px solid blue;
}


.box:after {
bottom: auto;
top: 100%;
border-bottom: none;
border-top: 15px solid blue;
}




/* Active box */
.box.active{
background: white;
color: black;
}






.active:before,
.active:after {
border-bottom: 15px solid white;
}


.active:before{
border-left: 15px solid white;
}


.active:after{
border-right: 15px solid white;
}


.active:after {
border-bottom: none;
border-top: 15px solid white;
}
<div class="box">
Some text goes here. Some text goes here. Some text goes here. Some text goes here.<br/>Some text goes here.<br/>Some text goes here.<br/>Some text goes here.<br/>Some text goes here.<br/>Some text goes here.<br/>
</div>
<div class="box">
Some text goes here.
</div>
<div class="box active">
Some text goes here.
<span class="border-bottom"></span>
</div>
<div class="box">
Some text goes here.
</div>

小开

另一个解决办法: Html:

<div class="background">
<div class="container">Hello world!</div>
</div>

Css:

.background {
position: relative;
width: 50px;
height: 50px;
border-right: 150px solid lightgreen;
border-bottom: 150px solid lightgreen;
border-radius: 10px;
}
.background::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
border: 25px solid lightgreen;
border-top-color: transparent;
border-left-color: transparent;
}
.container {
position: absolute;
padding-left: 25px;
padding-top: 25px;
font-size: 38px;
font-weight: bolder;
}

Https://codepen.io/eggofevil/pen/kyamjv

小开

你可以使用 clip-path，就像斯图尔特赛德和斯维亚托斯拉夫 · 奥列克斯夫提到的那样:

@mixin cut-corners ($left-top, $right-top: 0px, $right-bottom: 0px, $left-bottom: 0px) {
clip-path: polygon($left-top 0%, calc(100% - #{$right-top}) 0%, 100% $right-top, 100% calc(100% - #{$right-bottom}), calc(100% - #{$right-bottom}) 100%, $left-bottom 100%, 0% calc(100% - #{$left-bottom}), 0% $left-top);
}


.cut-corners {
@include cut-corners(10px, 0, 25px, 50px);
}
小开

这里有一个解决方案，如果你不想要一个纯色的背景，即只是一个方形切角边界。

.container {
width: 100px;
height: 100px;
background-color: white;
border: 1px solid black;
position: relative;
}


.border {
position: absolute;
width: 100%;
height: 100%;
}
.border:before {
content: '';
position: absolute;
border-top: 15px solid white;
border-left: 15px solid white;
width: 0;
}
  

.border:after {
content: '';
position: absolute;
width: 16px;
height: 1px;
background: black;
}
 

.tl:before { top: -5px; left: -5px; transform: rotate(-45deg); }
.tl:after { top: 5px; left: -3px; transform: rotate(-45deg);}


.tr:before { top: -5px; right: -5px; transform: rotate(45deg); }
.tr:after { top: 5px; right: -3px; transform: rotate(45deg); }


.bl:before { bottom: -5px; left: -5px; transform: rotate(45deg); }
.bl:after { bottom: 5px; left: -3px; transform: rotate(45deg); }


.br:before { bottom: -5px; right: -5px; transform: rotate(-45deg); }
.br:after { bottom: 5px; right: -3px; transform: rotate(-45deg); }
    


<html>
<body>
<div class="container">
<div class="border tl"></div>
<div class="border tr"></div>
<div class="border bl"></div>
<div class="border br"></div>
</div>
</body>
</html>

小开

另一个想法是使用掩码和 CSS 变量来更好地控制整个形状。它具有响应性、透明性，并且允许任何背景:

.box {
--all:0px;
width:200px;
height:150px;
display:inline-block;
margin:10px;
background:red;
-webkit-mask:
linear-gradient(  45deg, transparent 0 var(--bottom-left,var(--all)) ,#fff 0) bottom left,
linear-gradient( -45deg, transparent 0 var(--bottom-right,var(--all)),#fff 0) bottom right,
linear-gradient( 135deg, transparent 0 var(--top-left,var(--all))    ,#fff 0) top left,
linear-gradient(-135deg, transparent 0 var(--top-right,var(--all))   ,#fff 0) top right;
-webkit-mask-size:50.5% 50.5%;
-webkit-mask-repeat:no-repeat;
}




body {
background:grey;
}
<div class="box" style="--top-left:20px"></div>
<div class="box" style="--top-right:20px;--bottom-right:50px;background:radial-gradient(red,yellow)"></div>
<div class="box" style="--all:30px;background:url(https://picsum.photos/id/104/200/200)"></div>
<div class="box" style="--all:30px;--bottom-right:0px;background:linear-gradient(red,blue)"></div>
<div class="box" style="--all:50%;width:150px;background:green"></div>
<div class="box" style="--all:12%;width:150px;background:repeating-linear-gradient(45deg,#000 0 10px,#fff 0 20px)"></div>

CSS cut corner div using mask

如果你想考虑下边界:

.box {
--all:0px;
--b:pink;
  

width:200px;
height:150px;
display:inline-block;
margin:10px;
border:5px solid var(--b);
background:
linear-gradient(  45deg, var(--b) 0 calc(var(--bottom-left,var(--all)) + 5px) ,transparent 0) bottom left /50% 50%,
linear-gradient( -45deg, var(--b) 0 calc(var(--bottom-right,var(--all)) + 5px),transparent 0) bottom right/50% 50%,
linear-gradient( 135deg, var(--b) 0 calc(var(--top-left,var(--all)) + 5px)    ,transparent 0) top left    /50% 50%,
linear-gradient(-135deg, var(--b) 0 calc(var(--top-right,var(--all)) + 5px)   ,transparent 0) top right   /50% 50%,
var(--img,red);
background-origin:border-box;
background-repeat:no-repeat;
-webkit-mask:
linear-gradient(  45deg, transparent 0 var(--bottom-left,var(--all)) ,#fff 0) bottom left,
linear-gradient( -45deg, transparent 0 var(--bottom-right,var(--all)),#fff 0) bottom right,
linear-gradient( 135deg, transparent 0 var(--top-left,var(--all))    ,#fff 0) top left,
linear-gradient(-135deg, transparent 0 var(--top-right,var(--all))   ,#fff 0) top right;
-webkit-mask-size:50.5% 50.5%;
-webkit-mask-repeat:no-repeat;
}




body {
background:grey;
}
<div class="box" style="--top-left:20px"></div>
<div class="box" style="--top-right:20px;--bottom-right:50px;--img:radial-gradient(red,yellow);--b:white;"></div>
<div class="box" style="--all:30px;--img:url(https://picsum.photos/id/104/200/200) center/cover;--b:orange;"></div>
<div class="box" style="--all:30px;--bottom-right:0px;--img:linear-gradient(red,blue)"></div>
<div class="box" style="--all:50%;width:150px;--img:green;--b:red;"></div>
<div class="box" style="--all:12%;width:150px;--img:repeating-linear-gradient(45deg,#000 0 10px,#fff 0 20px)"></div>

CSS cut corner with border and gradient

再加上一些半径:

.box {
--all:0px;
--b:pink;
  

width:200px;
height:150px;
display:inline-block;
margin:10px;
filter:url(#round);
}
.box::before {
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:var(--img,red);
-webkit-mask:
linear-gradient(  45deg, transparent 0 var(--bottom-left,var(--all)) ,#fff 0) bottom left,
linear-gradient( -45deg, transparent 0 var(--bottom-right,var(--all)),#fff 0) bottom right,
linear-gradient( 135deg, transparent 0 var(--top-left,var(--all))    ,#fff 0) top left,
linear-gradient(-135deg, transparent 0 var(--top-right,var(--all))   ,#fff 0) top right;
-webkit-mask-size:50.5% 50.5%;
-webkit-mask-repeat:no-repeat;
}


body {
background:grey;
}
<div class="box" style="--top-left:20px"></div>
<div class="box" style="--top-right:20px;--bottom-right:50px;--img:radial-gradient(red,yellow);--b:white;"></div>
<div class="box" style="--all:30px;--img:url(https://picsum.photos/id/104/200/200) center/cover;--b:orange;"></div>
<div class="box" style="--all:30px;--bottom-right:0px;--img:linear-gradient(red,blue)"></div>
<div class="box" style="--all:50%;width:150px;--img:green;--b:red;"></div>
<div class="box" style="--all:12%;width:150px;--img:repeating-linear-gradient(45deg,#000 0 10px,#fff 0 20px)"></div>


<svg style="visibility: hidden; position: absolute;" width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="round">
<feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />
<feComposite in="SourceGraphic" in2="goo" operator="atop"/>
</filter>
</defs>
</svg>

Rounded cutted corner CSS


提交答案