CODEWITHSUNDEEP
htmlcss
user934902
user934902

Reputation: 1204

responsive CSS3 triangle

I am trying to add a responsive triangle piece to one of my divs (does not have to be IE8 compatible). I am struggling with making it responsive

http://jsfiddle.net/KzqB3/2/

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>

Upvotes: 0

Views: 738

Answers (1)

Ani
Ani

Reputation: 4523

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>

Upvotes: 2

Related Questions