使用CSS剪切角落

时间：2011-09-06 18:56:03

标签： css css3 css-shapes

我希望“剪切”div的左上角，就好像你已经折叠了一个页面的一角。

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

16 个答案:

答案 0 :(得分：89)

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

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

http://jsfiddle.net/2bZAW/

P.S。 The upcoming border-corner-shape正是您所需要的。太糟糕了，它可能会从规范中删除，并且永远不会进入任何浏览器：（

答案 1 :(得分：43)

如果您需要透明剪切边，则可以使用旋转的伪元素作为div的背景，并将其定位以剪切所需的角落：

Transprent cut out edge on a div

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<div>
  ... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>
</div>
＆＃13;
＆＃13;
＆＃13;

请注意，此解决方案使用转换，您需要添加所需的供应商前缀。有关详细信息，请参阅canIuse。

要剪切右下角，您可以将伪元素的top，transform和transform-origin属性更改为：

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<div>
  ... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>... content ...<br/>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：24)

CSS Clip-Path

使用clip-path是一种新的，即将到来的替代方案。它开始得到越来越多的支持，现在已经有了很好的记录。由于它使用SVG来创建形状，因此它可以直接开箱即用。

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<div>
  <p>Some Text</p>
</div>
＆＃13;
＆＃13;
＆＃13;

CSS转换

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

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<div>
  <div class="bg"></div>
  <p>Some Text</p>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：13)

您可以使用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

进一步阅读：

答案 4 :(得分：13)

这是使用CSS transform: skew(45deg)生成切角效果的另一种方法。形状本身包含三个元素（1个真元素和2个伪元素），如下所示：

  • 主容器div元素具有overflow: hidden并生成左边框。
  • :before伪元素，它是父容器高度的20％，并且应用了倾斜变换。这个元素突出了顶部的边框，并在右侧切割（倾斜）边框。
  • :after伪元素，它是父级高度的80％（基本上是剩余高度），并产生底部边框，右边框的剩余部分。

产生的输出是响应性的，在顶部产生透明切口并支持透明背景。

＆＃13;
＆＃13; 
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%);
}
＆＃13; 
<div class="cut-corner">Some content</div>
<div class="cut-corner filled">Some content</div>
＆＃13;
＆＃13;
＆＃13;

enter image description here

以下是使用linear-gradient背景图像生成切角效果的另一种方法。使用3个梯度图像（下面给出）的组合：

  • 一个线性渐变（向左下方倾斜）以产生切角效果。此渐变具有固定的25px x 25px大小。
  • 一个线性渐变，为三角形的左边提供纯色，从而产生切割效果。即使它产生纯色，也会使用渐变，因为只有在使用图像或渐变时我们才能控制背景的大小，位置。此渐变位于X轴上的-25px处（基本上意味着它将在切割出现的位置之前结束）。
  • 另一个类似于上面的渐变，它再次产生一种纯色，但在Y轴上位于25px处（再次留下切割区域）。

产生的输出是响应性的，产生透明切割并且不需要任何额外的元素（真实的或伪的）。缺点是这种方法只有在背景（填充）是纯色并且很难产生边框时才有效（但仍然可以在片段中看到）。

＆＃13;
＆＃13; 
.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%);
}
＆＃13; 
<div class="cut-corner">Some content</div>
<div class="cut-corner filled">Some content</div>
＆＃13;
＆＃13;
＆＃13;

enter image description here

答案 5 :(得分：7)

如果你需要一个对角线边框而不是一个对角线，你可以用每个伪元素叠加2个div：

样本

http://codepen.io/remcokalf/pen/BNxLMJ

＆＃13;
＆＃13; 
<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>
＆＃13; 
<?php
while ( $featured_query->have_posts() ) : 
    $featured_query->the_post();
    $post_id = get_the_ID();

    $slide_more_link = get_post_meta( $post_id, '_et_slide_more_link', true );
    $more_link = '' != $slide_more_link ? $slide_more_link : get_permalink();
    $class = 'et-first';
    $truncate_length = 610;

    $width = (int) apply_filters( 'et_slider_image_width', 578 );
    $height = (int) apply_filters( 'et_slider_image_height', 420 );
    $title = get_the_title();

    if ( 2 === $i ) {
        $class = 'et-second';
        $truncate_length = 250;
        $width = (int) apply_filters( 'et_slider_image_medium_width', 578 );
        $height = (int) apply_filters( 'et_slider_image_medium_height', 208 );
    } else if ( 1 !== $i ) {
        $class = 3 === $i ? 'et-third' : 'et-fourth';
        $truncate_length = 75;
        $width = (int) apply_filters( 'et_slider_image_small_width', 287 );
        $height = (int) apply_filters( 'et_slider_image_small_height', 208 );
    }

    if ( is_category() ) {
        $truncate_length = 390;
        $width = (int) apply_filters( 'et_slider_category_image_width', 578 );
        $height = (int) apply_filters( 'et_slider_category_image_height', 280 );
    }

    $thumbnail = get_thumbnail( $width, $height, '', $title, $title, false, 'Featured' );
    $thumb = $thumbnail["thumb"];
?>
＆＃13;
＆＃13;
＆＃13;

答案 6 :(得分：5)

此代码允许您在矩形的每一边切角：

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

答案 7 :(得分：3)

对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）'可以使内部'角落'不可见

您还可以编辑第4个参数'a'，其中 0＆lt; a＆lt; 1 ，为更多的“折角”效果留下阴影：

http://jsfiddle.net/2bZAW/1922/（有阴影）

注意： IE9 +，Firefox 3 +，Chrome，Safari和Opera 10 +支持RGBA颜色值。

答案 8 :(得分：2)

我们的切割元素存在不同背景颜色的问题。我们只想要右上角和左下角。

enter image description here

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 9 :(得分：2)

另一个想法是使用掩码和 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

答案 10 :(得分：1)

根据哈利的线性梯度解决方案（10月14日和9月15日15:55回答），它表示不透明背景是不可能的，我试过它，是的，它不是＆＃ 39;吨。

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

设置相对于容器的位置，并创建具有相同线性渐变属性的伪元素。换句话说，只需克隆它。然后为容器放置透明背景，并为克隆说一个黑色背景。将绝对位置放在上面，z指数为-1，不透明度值（即50％）。它会完成这项工作。再次，这是一个解决方法，它并不完美，但它的工作正常。

＆＃13;
＆＃13; 
.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%);
}
＆＃13; 
<div class="cut-corner">
  Some content<br>
  Some content<br>
  Some content<br>
  Some content  
</div>
＆＃13;
＆＃13;
＆＃13;

答案 11 :(得分：1)

您可以使用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);
}

答案 12 :(得分：0)

通过对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;
}

答案 13 :(得分：0)

我最近切断了右上角并将文件夹覆盖在文件夹上。完整的代码noob，所以忽略糟糕的代码，但我通过组合一个正方形，一个三角形和一个矩形来做到这一点...这可能是也可能不是一种新的方法，但希望有人觉得它很有帮助。

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

答案 14 :(得分：0)

另一种解决方案： 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

答案 15 :(得分：0)

如果您不希望使用纯色背景（即仅带有方形角的边框），这是一个解决方案。

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

相关问题
最新问题