Question

HTML：

<header>
    Header text.
</header>

<main>
    Your content here. 
</main>

CSS：

header {
    position: relative;
    background: #5fa3c6;
    padding: 8px 10px;
    color: #ffffff;
    font-size: 20px;
}

header:before {
    z-index: -1;
    position: absolute;
    width: 14px;
    height: 14px;
    background: #3b6c8a;
    content: '';
    left: 3px;
    bottom: -7px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

main {
    margin-left: 10px;
    border-left: 1px #5fa3c6 solid;
    padding: 10px;
    background: #ffffff;
}

小提琴：http://jsfiddle.net/LutJQ/3/

我如何在下面实现这样的目标？我尝试使用transform属性但没有运气。

Answer 1

通常的做法是使用边框：

Working demo

header:before {
    content: "";
    border: 10px solid transparent;
    border-right: 10px solid blue;
    border-top: 10px solid blue;
    position: absolute;
    bottom: -20px;
    left: 0;
}

不需要CSS3，因此浏览器兼容性很好。

Answer 2

您遗失了一些SkewX()

<强> FIDDLE

-webkit-transform: skewX(45deg) rotate(45deg);
-moz-transform: skewX(45deg) rotate(45deg);
-o-transform: skewX(45deg) rotate(45deg);
-ms-transform: skewX(45deg) rotate(45deg);
transform: skewX(45deg) rotate(45deg);

Answer 3

JSFiddle：http://jsfiddle.net/LutJQ/9/

无旋转的解决方案

header:before {
    z-index: -1;
    position: absolute;
    content: '';
    left: 0px;
    bottom: -10px;
    width: 0; 
    height: 0; 
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right:10px solid #476473; 
}

调整CSS3转换属性

3 个答案: