Cross Browser solution to css polygon

Question

I have two problems.

I have two float: right images and they are not overlapping no matter how I tried to fix it by z-index and absolute position, among other things. The first image is an diamond icon which float to right. The second isn't really an image but an css shape. I put it in the icon <i> and made its icon:after float right of the title. But as you can see, the icon is next to the diamond image border box instead of overlapping the image.

Second, the css polygon works fine in Chrome but not in firefox so I couldn't get the paragraph to line up along the diamond shape. It only line up against the image border box...

How do I fix it?

You can see the code in action at http://codepen.io/kikibres/pen/LVXKmp

HTML

<div class="bkgd">
<div class="iconcolumn">
  <img src="http://i.imgur.com/Nfwn0PT.png" alt="balance" >
  <!--<div class="iconcontent">-->
<div class="width">
  <i class="triangle"></i>
<h2 ><span>Test</span></h2>
  </div>
  <p>DUI is a serious offense, and it takes an aggressive attorney 
to defend you if you’re facing this charge. The law office of 
RI DUI Attorney Chad. F. Bank specializes in this area of the law. 
With over a decade of experience practicing law in Rhode Island 
as a DUI defense attorney, Attorney Bank takes each case seriously, 
and fights for his clients’ rights.</p>
  </div>
 <!-- </div>-->
</div>

CSS

.bkgd { background-color: #fbd196; padding: 30px 0; overflow: hidden;}
.iconcolumn { width: 54%; position: relative;}
.iconcolumn img { float: right; -webkit-shape-outside: polygon(nonzero, 50% 0%, 50% 0%, 100% 50%, 50% 100%, 0% 50%) content-box; shape-outside:polygon(nonzero, 50% 0%, 50% 0%, 100% 50%, 50% 100%, 0% 50%) content-box; -webkit-clip-path: polygon(nonzero, 50% 0%, 50% 0%, 100% 50%, 50% 100%, 0% 50%); clip-path: polygon(nonzero, 50% 0%, 50% 0%, 100% 50%, 50% 100%, 0% 50%); margin: 0 !important; background-color: #fff; }
.clear {clear: both;}
.iconcolumn h2 { margin: 0; background-color: #790000; color: #fff; padding: 10px 0px; text-align: center; letter-spacing: 1px !important; font-size: 28px !important; box-sizing: border-box; display: block; }
.iconcolumn p { margin-top: 70px; text-align: justify;}
.width {  }
.triangle { }
.triangle:after{ 
    content: "";
    position: /*absolute*/ relative;
  float: right;
    height: 0px; 
    width: 0px; 
    padding: 0px; 
    top: 0px; 
    right: -40px; 
    -webkit-transform: rotate(0deg) skew(0deg); 
    transform: rotate(0deg) skew(0deg); 
    border-top: 52px solid #790000; 
    border-left: 0px solid transparent; 
    border-right: 52px solid blue;
    vertical-align: top;
} 

Here's the image of what I was trying to achieve.

Answer 1

I'm not sure how to fix the polygon, but this is a solution to the triangle: http://jsfiddle.net/qq5tyton/2/

In order to get this to work I added some HTML and some CSS. I left your CSS so I could make as few changes as possible (to make it easier for you to see what changed).

First I added a i.newTriangle to your H2, and I updated that h2 to be position:relative. From there I absolute-positioned my .newTriangle to the right side, and sized it to align perfectly (try setting the background-color on .newTriangle to orange and you'll see how it's aligned). I also added position:relative;z-index:10 to your .iconcolumn img so that it would show up on top of the h2 if something went wrong and the margin wasn't respected.

Once that i was in place I added a span within it and rotated that 45 degrees, carefully resized it, and aligned it so that it filled only the top half of .newTriangle. Once that span was in place I added overflow:hidden to .newTriangle to cover the corners of the span.

From there I was able to add a right-side margin to the parent h2 to push the right edge over so that it wouldn't overlap your .iconcolumn img.

.bkgd { background-color: #fbd196; padding: 30px 0; overflow: hidden;}
.iconcolumn { width: 54%; position: relative;}
.iconcolumn img { float: right; -webkit-shape-outside: polygon(nonzero, 50% 0%, 50% 0%, 100% 50%, 50% 100%, 0% 50%) content-box; shape-outside:polygon(nonzero, 50% 0%, 50% 0%, 100% 50%, 50% 100%, 0% 50%) content-box; -webkit-clip-path: polygon(nonzero, 50% 0%, 50% 0%, 100% 50%, 50% 100%, 0% 50%); clip-path: polygon(nonzero, 50% 0%, 50% 0%, 100% 50%, 50% 100%, 0% 50%); margin: 0 !important; background-color: #fff; position:relative;z-index:10;}
.clear {clear: both;}
.iconcolumn h2 { margin: 0; background-color: #790000; color: #fff; padding: 10px 0px; text-align: center; letter-spacing: 1px !important; font-size: 28px !important; box-sizing: border-box; display: block;position:relative;margin-right:180px;}
.iconcolumn p { margin-top: 70px; text-align: justify;}
.newTriangle {position:absolute;width:52px;height:52px;background-color:transp;display:block;right:-52px;bottom:0px;overflow:hidden;}
.newTriangle span {display:block;-webkit-transform: rotate(45deg);transform:rotate(45deg);background-color:#790000;width:58px;height:140px;position:absolute;bottom:0;left:0;}
.width {  }
.triangle { }
.triangle:after{ 
    content: "";
    position: /*absolute*/ relative;
  float: right;
    height: 0px; 
    width: 0px; 
    padding: 0px; 
    top: 0px; 
    right: -40px; 
    -webkit-transform: rotate(0deg) skew(0deg); 
    transform: rotate(0deg) skew(0deg); 
    border-top: 52px solid #790000; 
    border-left: 0px solid transparent; 
    border-right: 52px solid blue;
    vertical-align: top;
} 

<div class="bkgd">
<div class="iconcolumn">
  <img src="http://i.imgur.com/Nfwn0PT.png" alt="balance" >
  <!--<div class="iconcontent">-->
<div class="width">
  <i class="triangle"></i>
    <h2>
        <span>Test</span>
        <i class="newTriangle">
            <span></span>
        </i>
    </h2>
  </div>
  <p>DUI is a serious offense, and it takes an aggressive attorney 
to defend you if you’re facing this charge. The law office of 
RI DUI Attorney Chad. F. Bank specializes in this area of the law. 
With over a decade of experience practicing law in Rhode Island 
as a DUI defense attorney, Attorney Bank takes each case seriously, 
and fights for his clients’ rights.</p>
  </div>
 <!-- </div>-->
</div>