不规则形状背景 - 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

你可以这样写：

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

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

Answer 2

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

DEMO

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

<div></div>

IE9 and over 支持转换。

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

Answer 3

你可以使用线性渐变

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

<div></div>

Answer 4

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

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

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

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>

不规则形状背景 - css

irregular shape background - css

css

css-shapes