扭捏CSS3转换属性

2014-05-08 69 views 0 likes

<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/

如何能够做到像下面这样？我尝试了变形属性，但没有运气。

来源

2014-05-08 theJava

你似乎也已经做了很好的工作，形象和小提琴都是一样的（除了颜色，但我不认为这是问题）你想调整什么？ –

查看标题的底部，在图像和代码的情况下，曲线和变换不相同。 – theJava

[CSS shapes？]（https://css-tricks.com/examples/ShapesOfCSS/） – Jonathan

回答

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

来源

2014-05-08 12:58:42

通常的方法做，这是有边界：

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所以浏览器的兼容性是伟大的。

来源

2014-05-08 12:49:49 Turnip

你缺少一些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);

来源

2014-05-08 12:51:03

扭捏CSS3转换属性

回答

相关问题