跨浏览器解决方案到css多边形

Question

我有两个问题。

我有两个浮动：右图像，它们不重叠，无论我如何尝试通过z-index和绝对位置修复它等等。第一张图片是一个浮动到右边的菱形图标。第二个不是图像而是css形状。我把它放在图标<i>中并制作了它的图标：向右移动标题后。但正如您所看到的，图标位于菱形图像边框旁边，而不是与图像重叠。

其次，css多边形在Chrome中运行良好，但在Firefox中没有，所以我无法让段落沿着钻石形状排列。它只对着图像边框框...

我该如何解决？

您可以在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;
} 

这是我想要实现的目标的形象。

Answer 1

我不确定如何修复多边形，但这是三角形的解决方案： http://jsfiddle.net/qq5tyton/2/

为了实现这一点，我添加了一些HTML和一些CSS。我离开了你的CSS，所以我可以做尽可能少的更改（让你更容易看到改变了什么）。

首先，我向i.newTriangle添加了H2，并将h2更新为position:relative。从那里我绝对地将我的.newTriangle定位到右侧，并将其调整为完全对齐（尝试将.newTriangle上的背景颜色设置为橙色，然后您将看到它是如何对齐的。对齐）。我还在position:relative;z-index:10添加了.iconcolumn img，这样如果出现问题并且保证金没有得到尊重，它就会显示在h2之上。

一旦i到位，我在其中添加了一个范围并旋转了 45度，小心地调整了它，并对齐它以便它只填充{{的上半部分1}}。在该范围到位后，我将.newTriangle添加到overflow:hidden以覆盖范围的角落。

从那里我可以为父h2添加一个右侧边距，将右边缘向上推，这样它就不会与.newTriangle重叠。

＆＃13;

＆＃13;

.iconcolumn img

＆＃13;

.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;
} 

＆＃13;

＆＃13;

＆＃13;