Question

我正在尝试将一个响应三角形片添加到我的一个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; }

HTML

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

Answer 1

Fiddle Link

<强> CSS

.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></div>

响应式CSS3三角形

1 个答案: