使用 CSS 切角
Posted
技术标签:
【中文标题】使用 CSS 切角【英文标题】：Cut Corners using CSS 【发布时间】：2011-11-11 14:08:10 【问题描述】：我正在寻找“剪切” div 的左上角，就像您向下折叠页面的角一样。
我想用纯CSS来做，有什么方法吗？
【问题讨论】：
新的透明响应方式：***.com/a/65759042/8620333 【参考方案1】：如果父元素有纯色背景，可以使用伪元素来创建效果：
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 正是您要找的。太糟糕了，它可能会被排除在规范之外，并且永远不会进入野外的任何浏览器:(
【讨论】：
我不明白为什么会这样。之前用于将内容添加到元素。是什么导致了对角线效应？ @chiliNUT -:before 添加了一个伪元素，可以独立于主元素设置样式。这里的伪元素带有边框样式，创建了白色三角形 (when an element's borders meet, they're cut diagonally.
这很酷，但我相信我说它只在父元素后面的背景颜色为白色时才有效？
@Andy 或可预测的纯色。
有/将会有？不过，该问题的解决方法是切断溢出。【参考方案2】：
如果您需要透明切出边缘，您可以使用旋转的伪元素作为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>请注意，此解决方案使用转换，您需要添加所需的供应商前缀。欲了解更多信息，请参阅canIuse。
要剪切右下边缘，可以将伪元素的top、transform和transform-origin属性更改为：
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 个偷工减料 解决方案：jsfiddle.net/o2udwet4 用于上一个/下一个按钮 如果有人能解释为什么这样做会很好。与伪元素的绘制顺序有关？ @AdamThomas 背景应用于:after 伪元素，它延伸到父div 之外，并以不覆盖顶角的方式旋转。因为父 div 指定 overflow: hidden，所以超出它的 :after 伪元素的部分不可见。
我想知道为什么专门设置宽高为1100%，为什么右属性设置为-500%
@Andy 将宽度和高度设置为非常高的值，以便伪元素溢出容器，即使它比示例中的大。伪元素右属性的 -500% 值是在容器中水平居中(1100% -100%) / 2 = 500%【参考方案3】：
CSS 剪辑路径
使用clip-path 是一种新的、即将到来的替代方案。它开始得到越来越多的支持，现在已经有据可查。由于它使用 SVG 来创建形状，因此它是开箱即用的响应式。
CanIUse Clip Path Generatordiv
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>【讨论】：
【参考方案4】：这是另一种使用 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>以下是另一种使用linear-gradient 背景图像产生切角效果的方法。使用了 3 个渐变图像的组合（如下所示）：
产生的输出是响应式的，产生透明的剪切并且不需要任何额外的元素（真实的或伪的）。缺点是这种方法只有在背景（填充）是纯色并且很难产生边框时才有效（但仍然可以在 sn-p 中看到）。
.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>【讨论】：
【参考方案5】：您可以使用linear-gradient。假设父 div 有一个背景图像，而您需要一个 div 坐在上面，背景是灰色的，左角有一个折角。你可以这样做：
.parent-div background: url('/image.jpg');
.child-div
background: #333;
background: linear-gradient(135deg, transparent 30px, #333 0);
See it on CodePen
进一步阅读：
CSS Gradients on CSS-Tricks Beveled corners & negative border-radius with CSS3 gradients【讨论】：
遗憾的是，在某些角度看起来不太好。【参考方案6】：如果您需要对角边框而不是对角角，您可以堆叠 2 个 div，每个 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>【讨论】：
【参考方案7】：此代码允许您在矩形的每一侧切角：
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/
【讨论】：
是否有可能在有边框的同时以某种方式实现？ 谢谢。您知道此解决方案如何影响性能吗？好像有点重。 @Tsury 需要更多调查 这是旧的，但剪辑路径效果很好。我还找到了一个方便的工具来为您构建剪辑路径：bennettfeely.com/clippy【参考方案8】：我们的剪切元素存在不同背景颜色的问题。我们只想要右上角和左下角。
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>【讨论】：
【参考方案9】：另一个想法是使用掩码和 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>如果您想考虑边框，请在下面：
.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>让我们也添加一些半径：
.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;" 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>【讨论】：
【参考方案10】：对 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)' 可以让内部的 'corner' 不可见 .
您还可以编辑第 4 个参数“a”，其中 0 ，以获得更多“折叠角”效果的阴影：
http://jsfiddle.net/2bZAW/1922/（带阴影）
注意： IE9+、Firefox 3+、Chrome、Safari 和 Opera 10+ 支持 RGBA 颜色值。
【讨论】：
使用“透明”一词代替 rgba(0,0,0,0)，您将在 IE7+ 中获得更大的支持 parent 元素仍然必须是纯色（例如，在您的示例中它是纯白色），我认为这是 Joseph 所指的限制。 @web-tiki 的答案非常出色地处理了更复杂的背景。【参考方案11】：通过对 Joshep 的代码进行小幅修改...您可以使用此代码，该代码看起来像是根据您的要求向下折叠的右角。
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;
【讨论】：
【参考方案12】：根据 Harry 的线性梯度解决方案（2015 年 10 月 14 日 9:55 回答），它说不透明背景是不可能的，我试过了，是的，它不是。
但是！我找到了解决方法。不，它不是超级优化的，但它确实有效。所以这是我的解决方案。由于 Harry 不使用伪元素，我们可以通过创建一个来实现。
设置相对于容器的位置并创建一个具有相同线性渐变属性的伪元素。换句话说，只需克隆它。然后为容器设置一个透明背景，并为克隆设置一个黑色背景。在其上放置一个绝对位置，一个 -1 的 z-index 和一个不透明度值（即 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>【讨论】：
【参考方案13】：您可以使用clip-path，正如 Stewartside 和 Sviatoslav Oleksiv 所提到的。为了方便起见，我创建了一个 sass mixin：
@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);
【讨论】：
这个问题被标记为'CSS'。 @Sapphire_Brick 它可能对其他人有所帮助【参考方案14】：我最近切掉了右上角并像文件夹一样覆盖了选项卡。完整的代码新手，所以忽略那些糟糕的代码，但我通过组合正方形、三角形和矩形来做到这一点……这可能是也可能不是一种新方法，但希望有人觉得它有帮助。
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;
【讨论】：
【参考方案15】：另一种解决方案： 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
【讨论】：
【参考方案16】：如果您不想要纯色背景，例如，只需要带有方形切角的边框，这里有一个解决方案。
.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 切角的主要内容，如果未能解决你的问题，请参考以下文章