斜线交叉响应

Question

无论如何创建类似于HTML / CSS的附件，它是否有效？没有使用我的形象？

无法获得oragne border＆amp;添加的内容 CSS

.left {

  border-bottom: 70px solid #3488b1;
  border-right: 1000px solid transparent;
  height: 0;
  position: absolute;
  bottom:0;
 width: 1px;
 opacity:.5;
 }
.right {
  border-bottom: 70px solid #3488b1;
  border-left: 1000px solid transparent;
  height: 0;
 width: 1px;
 position: absolute;
 bottom:0;
}

 .footer {height:100px;}

＆安培; HTML

<div class="footer">
<span class="left"> </span>
<span class="right"></span>
</div>

Answer 1

一种方法是使用变换。

html, body {
    height:100%;
    width:100%;
}
#responsive {
    position:relative;
    height:25%;
    width:80%;
    overflow:hidden;
    min-height: 80px;
}
#triOne {
    position:absolute;
    background-color:aqua;
    height:300%;
    width:300%;
    transform: rotate(10deg);
    top:55%;
    left:-100%;
}
#triTwo {
    position:absolute;
    background-color:blue;
    height:300%;
    width:300%;
    border: 5px solid orange;
    transform: rotate(-10deg);
    top:45%;
    right:-100%;
}
#content {
    position:absolute;
    right:10px;
    bottom:10px;
    color:white;
}

<div id="responsive">
    <div id="triOne"></div>
    <div id="triTwo"></div>
    <div id="content">content</div>
</div>

它不是真正的响应，但我认为通过一些调整，你应该能够按照你想要的方式得到它。