HTML Div元素具有弯曲边框

Question

我想让我的Header Div的底部弯曲。基本上div应该是倾斜的，我尝试下面的，并且它在所有最新的浏览器中工作，除了ie8＆amp;以下

<div class="HeaderTitle" style="background: #000;">
        <h1 class="header">
            PROMOTIONS</h1>
    </div>


#Container #InnerPages .HeaderTitle 
{
    padding: 115px 0 0 0; background-color: #000; 
    margin-right: -20px;
    -webkit-transform: rotate(5deg); /* Safari and Chrome */ 
    -moz-transform: rotate(5deg);    /* Firefox */
    -o-transform: rotate(5deg);      /* Opera */
    -ms-transform: rotate(5deg);     /* IE 9 */
    transform: rotate(5deg);
}
#Container #InnerPages .header
{
    text-align: center; color: #fff; font-size: 30px; margin: 0; padding: 0 0 26px; 
    -webkit-transform: rotate(-5deg); /* Safari and Chrome */ 
    -moz-transform: rotate(-5deg);    /* Firefox */
    -o-transform: rotate(-5deg);      /* Opera */
    -ms-transform: rotate(-5deg);     /* IE 9 */
    transform: rotate(-5deg);
}

但这在IE＆amp;我的客户非常坚定它应该在IE 8中工作： - （

任何帮助请...

Answer 1

解决方案1 ​​ 使用IETransformsTranslator

这是一个在线工具使用这个工具，您可以制作矩阵滤波器转换适用于IE6，IE7和IE的工具。 IE8。只需粘贴CSS3转换函数（例如，旋转（15deg）），它将完成剩下的工作。

解决方案2

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

BasicImage过滤器的rotation属性可以接受以下四个值中的一个：0,1,2或3，它们将分别旋转元素0,90,180或270 degress。

解决方案3

由于这个答案仍在起作用，我觉得我应该用一个名为CSS Sandpaper的javacript库的信息来更新它，它允许你使用（附近）标准CSS代码进行轮换，即使在较旧的IE版本中也是如此。

一旦您将CSS Sandpaper添加到您的网站，您就应该能够为IE6-8编写以下CSS代码：

-sand-transform: rotate(25deg);

希望这可以帮助你：）

Answer 2

基本上你想要IE8的曲线

这将有助于

.div
{
   -webkit-border-radius:4px;        /* older webkit based browsers */
   -khtml-border-radius:4px;         /* older khtml based browsers */
   -moz-border-radius:4px;           /* older firefox */
   border-radius:4px;                /* standard */
   behavior: url(border-radius.htc); /* IE 6-8 */
}