不规则形状背景 - css

Question

我正在使用this tutorial制作Triangle Top Left，如此：

#triangle-topleft {
  width: 0;
  height: 0;
  border-top: 100px solid red;
  border-right: 100px solid transparent;
}

输出：

但是我怎样才能制作出与此类似的不规则形状但是在右下角切出一个角落？ 例如：

html是直截了当的：<div id='triangle-topleft'><div>

Answer 1

您可以使用渐变来填充透明部分的背景。

＆＃13;

＆＃13;

.Ttrgle {
  display:inline-block; /* or whatever or absolute position that allows to size it */
  width:100px;
  height:100px;
  background:linear-gradient(to top left, transparent 33%, red 33%);
  }
html {
  background:linear-gradient(45deg, gray,white,blue,purple,yellow,green,lime,pink,turquoise)
    }

＆＃13;

<span class="Ttrgle"></span>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用线性渐变

body {
  background: #bada55;
}
div {
  width: 200px;
  height: 200px;
  background-image: linear-gradient(to bottom right, red, red 60%, transparent 60%);
}

<div></div>

Answer 3

您可以写下这样的内容：

＆＃13;

＆＃13;

#triangle-topleft {
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-right: 100px solid transparent;
    position:absolute;top:0;left:0;
}

.outer-div {position:relative;width:80px;height:80px;overflow:hidden;}

＆＃13;

 <div class="outer-div">
    <div id="triangle-topleft"></div>
 </div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

您可以使用旋转的伪元素。该方法类似于here描述的方法，但转换原点更改为15% 100%：

<强> DEMO

＆＃13;

＆＃13;

div{
    position:relative;
    width:100px;height:100px;
    overflow:hidden;
}
div:before{
    content:'';
    position:absolute;
    left:0; bottom:0;
    width:200%; height:200%;
    transform-origin: 15% 100%;
    transform:rotate(-45deg);
    background:red;
}

/* FOR THE DEMO */

body{background:url('http://lorempixel.com/output/people-q-c-640-480-8.jpg');background-size:cover;}
  

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;

IE9 and over支持转换。

请注意，我没有在代码段中包含供应商前缀。它们包含在小提琴演示中。

Answer 5

将div换成另一个稍小的div并溢出：隐藏

#triangle-topleft {
	border-top: 120px solid red;
	border-right: 120px solid transparent;
    position:absolute;
    left:0px;
    top:0px;
}
#container {
    position:absolute;
    width: 90px;
    height: 90px;
    overflow:hidden;
}

<div id='container'>
    <div id='triangle-topleft'></div>
</div>