div的左上/右下侧倾斜的角落

Question

我们如何在纯css中创建这个形状？

Answer 1

您可以执行以下操作：

  

HTML

<div class="topleft">
    <div class="buttomright"></div>
</div>

  

和css

div {
    height: 300px;
    background: silver;
    position: relative;
}
.topleft:after {
    content:'';
    position: absolute;
    top: 0;
    left: 0;

    border-top: 80px solid white;
    border-right: 80px solid silver;
    width: 0;
}

    .buttomright:before {
        content:'';
        position: absolute;
        bottom: 0;
        right: 0; 
        border-bottom: 80px solid white;
        border-left: 80px solid silver;
        width: 0;
    }

请参阅JSFiddle

Answer 2

http://jsfiddle.net/b48AK/

  body {background: #8aa; padding:0px; margin:0px}
#outer {
  background: #fff;
  position:relative;
  margin:15px;
} 

#outer:before { 
  content: ""; 
  height: 100%;
  left: -15px;
  position: absolute;  
  border-top: 15px solid transparent;
  border-right: 15px solid #fff;
} 

#outer:after { 
  content: ""; 
  width: 100%;
  height: 100%;
  top: -15px;
  left: 100%;
  position: absolute; 
  border-left: 15px solid #fff;
  border-bottom: 15px solid transparent;
} 

#outer span:before {
  display: block;
  content: "";
  width: 100%;
  top: -15px;
  left: 0;
  position: absolute;
  border-bottom: 15px solid #fff;
  border-left: 15px solid transparent;
}

#outer span:after {
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  top: 100%;
  left: -15px;
  position: absolute;
  border-top: 15px solid #fff;
  border-right: 15px solid transparent;
}

Answer 3

CSS3 linear-gradient()可以在背景上绘制此形状：

div {
  background-image: linear-gradient(135deg, transparent 20px, silver 20px),
                    linear-gradient(-45deg, transparent 20px, silver 20px);

  background-repeat: no-repeat;
  background-position: 0 0, 50% 0;
  background-size: 50% 100%;
}

＆＃13;

＆＃13;

body {
  background: linear-gradient(orange, red);
  min-height: 100vh;
  margin: 0;
}
div {
  background-image: linear-gradient(135deg, transparent 20px, silver 20px),
                    linear-gradient(-45deg, transparent 20px, silver 20px);

  background-repeat: no-repeat;
  background-position: 0 0, 50% 0;
  background-size: 50% 100%;
  height: 150px;
  width: 500px;
  margin: 20px;
}

＆＃13;

<div>

</div>

＆＃13;

＆＃13;

＆＃13;