Html 响应式CSS3三角形

我试图在我的一个div中添加一个响应性的三角形（不必与IE8兼容）。我正在努力使它具有响应性

CSS

.triangle {
    width: 90%;
    height: 0;
    padding-left:10%;
    padding-top: 10%;
    overflow: hidden;
}
.triangle:after {
    content: "";
    position: absolute;
    top: 66px;
    display: block;
    float: left;
    width: 0;
    height: 0;
    left: 2%;
    border-left: 275px solid transparent;
    border-right: 275px solid transparent;
    border-top: 50px solid #4679BD;
}
.content { width: 90%; background-color: #4679Bd; }
.content p { color: #fff; padding: 15px 0; }

.triangle{
   width: 56%;
   height: 0;
   padding-left: 45%;
   padding-top: 45%;
   overflow: hidden;
}
.triangle div {
   width: 0; 
   height: 0;
   margin-left:-500px;
   margin-top:-500px;
   border-left: 500px solid transparent;
   border-right: 500px solid transparent;
   border-top: 500px solid #4679BD;
}
 .content { width: 90%; background-color: #4679Bd; }
.content p { color: #fff; padding: 15px 0; margin: 0; }

HTML

<div class="content">
    <p>Paragraph inside this div</p>
</div>
<div class="triangle"></div>

<div class="content">
   <p>Paragraph inside this div</p>
</div>
<div class="triangle"><div></div></div>

本分部内的段落

CSS

.triangle {
    width: 90%;
    height: 0;
    padding-left:10%;
    padding-top: 10%;
    overflow: hidden;
}
.triangle:after {
    content: "";
    position: absolute;
    top: 66px;
    display: block;
    float: left;
    width: 0;
    height: 0;
    left: 2%;
    border-left: 275px solid transparent;
    border-right: 275px solid transparent;
    border-top: 50px solid #4679BD;
}
.content { width: 90%; background-color: #4679Bd; }
.content p { color: #fff; padding: 15px 0; }

.triangle{
   width: 56%;
   height: 0;
   padding-left: 45%;
   padding-top: 45%;
   overflow: hidden;
}
.triangle div {
   width: 0; 
   height: 0;
   margin-left:-500px;
   margin-top:-500px;
   border-left: 500px solid transparent;
   border-right: 500px solid transparent;
   border-top: 500px solid #4679BD;
}
 .content { width: 90%; background-color: #4679Bd; }
.content p { color: #fff; padding: 15px 0; margin: 0; }

HTML

<div class="content">
    <p>Paragraph inside this div</p>
</div>
<div class="triangle"></div>

<div class="content">
   <p>Paragraph inside this div</p>
</div>
<div class="triangle"><div></div></div>

本分部内的段落

它应该是blueu div的宽度吗？它应该是垂直响应的吗？您可能需要以不同的方式处理此问题：不……我认为存在一个way@Ani我几乎100%肯定没有办法。你最好的选择，尤其是当你不需要IE8支持的时候，是使用一个

svg

图像，它可以缩放到任何大小或html5画布。@JoshPowell发现了它。检查答案我不会称之为响应，但这是一个很好的工作一轮。在更宽的屏幕上，三角形将脱离父屏幕并向下拍摄。我猜OP不希望三角形的高度增加。最后一个

svg

图像在实际情况下要比这个选项优越得多。在使用它作为我的起点之前，我已经知道了，但是三角形不能是等边的，必须类似于我的小提琴，它是等角的，不能有一个巨大的点ani发布的作品反应迅速它只是不是我要找的三角形我会尽量让它等中心线